/* Bkjr Projects (/bkjr-projects): Brian's dev-project roadmap. Black-and-white brand tokens (bk-tokens.css), matching the homepage. Scoped to .bkp-*. */
.bkp { --bkp-accent: var(--bk-white, #fff); --bkp-accent-hi: var(--bk-white, #fff); --bkp-night: var(--bk-black, #050505); --bkp-line: var(--bk-line, #2a2a2a); --bkp-line-strong: var(--bk-line-strong, #3d3d3d); --bkp-ink: var(--bk-silver, #c8c8c8); --bkp-muted: var(--bk-gray-600, #b4b4b4); background: var(--bkp-night); color: var(--bkp-ink); }
.bkp a { color: var(--bkp-accent-hi); }
.bkp a:hover { color: #fff; }
.bkp :focus-visible { outline: 3px solid var(--bkp-accent-hi); outline-offset: 2px; }
.bkp-hero { background: radial-gradient(circle at 85% 10%, rgba(255, 255, 255, .07), transparent 45%), linear-gradient(160deg, #1a1a1a 0%, #121212 55%, var(--bkp-night) 100%); border-bottom: 1px solid var(--bkp-line); padding: 112px 0 44px; }
.bkp-wrap { max-width: 1100px; margin: 0 auto; padding: 0 22px; }
.bkp-kicker { font-family: var(--font-display); letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; color: var(--bkp-accent); margin: 0 0 12px; }
.bkp-hero h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.06; max-width: 22ch; margin: 0 0 18px; color: #fff; }
.bkp-sub { font-size: 1.08rem; line-height: 1.6; max-width: 64ch; color: var(--bkp-ink); margin: 0 0 22px; }
.bkp-note-top { display: inline-block; font-size: .85rem; color: var(--bkp-muted); border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; padding: 6px 14px; }
.bkp-toc { background: rgba(5, 5, 5, .96); border-bottom: 1px solid var(--bkp-line); }
.bkp-toc ol { display: flex; gap: 6px; overflow-x: auto; list-style: none; margin: 0 auto; padding: 10px 22px; max-width: 1100px; scrollbar-width: thin; }
.bkp-toc a { display: block; white-space: nowrap; font-size: .85rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--bkp-line-strong); color: var(--bkp-ink); text-decoration: none; }
.bkp-toc a:hover { border-color: var(--bkp-accent); color: #fff; }
.bkp-main { padding: 18px 0 64px; }
.bkp-sec { padding: 40px 0 8px; border-bottom: 1px solid var(--bkp-line); scroll-margin-top: 96px; }
.bkp-sec:last-child { border-bottom: 0; }
.bkp-sec h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); color: #fff; margin: 0 0 10px; }
.bkp-sec h2 .bkp-num { color: var(--bkp-accent); margin-right: 10px; }
.bkp-sec h3 { font-size: 1.12rem; color: var(--bkp-accent-hi); margin: 0 0 8px; font-family: var(--font-body); font-weight: 700; letter-spacing: 0; text-transform: none; }
.bkp-lede { max-width: 72ch; color: var(--bkp-ink); margin: 0 0 18px; }
.bkp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; margin: 0 0 18px; }
.bkp-card { background: var(--bk-charcoal, #121212); border: 1px solid var(--bkp-line-strong); border-radius: 12px; padding: 18px 18px 14px; min-width: 0; }
.bkp-card p, .bkp-card li { font-size: .95rem; line-height: 1.6; }
.bkp-card ul, .bkp-card ol { padding-left: 20px; margin: 6px 0 10px; }
.bkp-card li { margin: 4px 0; }
.bkp code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em; background: rgba(255, 255, 255, .07); border: 1px solid var(--bkp-line-strong); border-radius: 5px; padding: 1px 5px; color: var(--bk-cream, #f3f3f3); overflow-wrap: anywhere; }
.bkp pre { background: #0a0a0a; border: 1px solid var(--bkp-line-strong); border-left: 3px solid var(--bkp-accent); border-radius: 8px; padding: 14px 16px; overflow-x: auto; margin: 8px 0 14px; max-width: 100%; }
.bkp pre code { background: none; border: 0; padding: 0; font-size: .84rem; line-height: 1.55; white-space: pre; overflow-wrap: normal; color: var(--bk-cream, #f3f3f3); }
.bkp details { border: 1px solid var(--bkp-line-strong); border-radius: 10px; margin: 10px 0; background: rgba(255, 255, 255, .03); }
.bkp summary { cursor: pointer; padding: 12px 16px; font-weight: 600; color: #fff; }
.bkp summary:hover { color: var(--bkp-accent-hi); }
.bkp details > :not(summary) { margin-left: 16px; margin-right: 16px; }
.bkp details > :last-child { margin-bottom: 14px; }
.bkp-check { list-style: none; padding: 0 !important; margin: 8px 0 12px; }
.bkp-check li { margin: 0; }
.bkp-check label { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; cursor: pointer; line-height: 1.5; }
.bkp-check input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--bkp-accent); }
.bkp-check input:checked + span { color: var(--bkp-muted); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .5); }
.bkp-check.bkp-todo { border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .04); border-radius: 12px; padding: 8px 18px !important; }
.bkp-todo label { padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.bkp-todo li:last-child label { border-bottom: 0; }
.bkp-todo strong { color: #fff; }
.bkp-progress { font-size: .85rem; color: var(--bkp-muted); margin: 6px 0 0; }
.bkp-stop { border-left: 4px solid var(--bkp-accent); background: rgba(255, 255, 255, .05); border-radius: 0 10px 10px 0; padding: 12px 16px; margin: 12px 0 18px; }
.bkp-steps { counter-reset: s; list-style: none; padding: 0 !important; display: grid; gap: 10px; margin: 8px 0 16px; }
.bkp-steps > li { counter-increment: s; position: relative; padding: 12px 14px 12px 54px; border: 1px solid var(--bkp-line-strong); border-radius: 10px; background: var(--bk-charcoal, #121212); }
.bkp-steps > li::before { content: counter(s); position: absolute; left: 14px; top: 11px; width: 28px; height: 28px; border-radius: 50%; background: var(--bkp-accent); color: var(--bk-black, #050505); font-weight: 800; display: grid; place-items: center; font-size: .9rem; }
.bkp-tag { display: inline-block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bk-black, #050505); background: var(--bkp-accent); border-radius: 999px; padding: 2px 9px; margin-bottom: 8px; font-weight: 700; }
.bkp-tag-idea { background: var(--bk-silver, #c8c8c8); }
.bkp-docs { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .88rem; margin: 6px 0 0 !important; }
.bkp-foot { border-top: 1px solid var(--bkp-line); padding: 28px 0 40px; font-size: .88rem; color: var(--bkp-muted); }
@media (max-width: 640px) { .bkp-hero { padding: 96px 0 32px; } .bkp-steps > li { padding-left: 48px; } }