@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
:root {
--paper: #f5f1ea; --paper-2: #ece6db; --paper-3: #e2dacf;
--ink: #1d1d1b; --ink-2: #3a3a37; --ink-3: #52524c; --ink-4: #8a877f;
--accent: #2f8a4f; --accent-2: #267a43;
--border-mid: rgba(29,29,27,.15);
--code-bg: #1d1d1b; --code-fg: #e8e4dc;
--code-keyword: #7ec699; --code-string: #e6c07b; --code-comment: #6a6a65; --code-fn: #61afef;
--radius: 8px;
--footer-border: rgba(29,29,27,.15);
--border-mid: rgba(29,29,27,.12);
}
/* ── Dark mode via JS toggle (data-theme="dark" on ) ── */
[data-theme="dark"] {
--paper: #121110; --paper-2: #1b1917; --paper-3: #242220;
--ink: #e8e4dc; --ink-2: #c4c0b8; --ink-3: #9a968e; --ink-4: #6a665e;
--accent: #4aad6a; --accent-2: #3d9459;
--code-bg: #0f0f0e; --code-fg: #e8e4dc;
--footer-border: rgba(232,228,220,.12);
--border-mid: rgba(232,228,220,.10);
}
[data-theme="dark"] .badge-oyeme { color: #B65C3A; border-color: #B65C3A; }
[data-theme="dark"] .post-card { border-color: var(--ink-3); }
/* ── Base ── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--paper); color: var(--ink); font-family: "Inter Tight", system-ui, sans-serif; -webkit-font-smoothing: antialiased; transition: background-color .2s, color .2s; }
body { max-width: 640px; margin: 0 auto; padding: 40px 20px 64px; }
/* ── Nav ── */
.blog-nav {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: .08em;
margin-bottom: 40px;
display: flex;
flex-wrap: wrap;
column-gap: 8px;
row-gap: 6px;
align-items: center;
}
.blog-nav a { color: var(--ink-3); text-decoration: none; border-bottom: 1px dashed var(--ink-4); padding-bottom: 1px; transition: color .15s, border-color .15s; }
.blog-nav a:hover { color: var(--link-hover, var(--accent)); border-color: var(--link-hover, var(--accent)); }
.blog-nav .sep { color: var(--ink-4); opacity: .7; }
/* Theme toggle button — lives in the nav */
.theme-toggle {
background: none; border: 1px dashed var(--ink-4); border-radius: 4px;
padding: 2px 7px; cursor: pointer; color: var(--ink-3);
font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .08em;
margin-left: auto; transition: color .15s, border-color .15s; line-height: 1.4;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink); }
/* Language toggle — sits in the nav, before .theme-toggle */
.lang-toggle {
display: inline-flex; align-items: center; gap: 5px;
border: 1px dashed var(--ink-4); border-radius: 4px;
padding: 2px 7px; line-height: 1.4;
font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .08em;
margin-left: auto;
}
.lang-toggle .lang-opt {
background: none; border: none; padding: 0; cursor: pointer;
font: inherit; letter-spacing: inherit; color: var(--ink-4);
transition: color .15s;
-webkit-tap-highlight-color: transparent;
}
.lang-toggle .lang-opt.active { color: var(--ink); }
.lang-toggle .lang-opt:hover:not(.disabled):not(.active) { color: var(--ink-2); }
.lang-toggle .lang-opt.disabled { cursor: default; color: var(--ink-4); text-decoration: line-through; text-decoration-thickness: 1px; }
.lang-toggle .lang-sep { color: var(--ink-4); opacity: .7; }
/* When both toggles are present, lang holds the right-push and theme sits next to it */
.lang-toggle + .theme-toggle { margin-left: 6px; }
/* Generic per-element language visibility. Pages can wrap variants in
…… and they'll
swap based on . Scoped under body so we don't hide the
element (which itself carries data-lang). */
body [data-lang="en"], body [data-lang="es"] { display: none; }
html[data-lang="en"] body [data-lang="en"],
html[data-lang="es"] body [data-lang="es"] { display: revert; }
/* ── Hub (index) ── */
.hub-title { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 8px; }
.hub-subtitle { font-size: 14px; color: var(--ink-2); line-height: 1.6; margin-bottom: 32px; }
.post-list { list-style: none; }
.post-card { border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px; transition: background .15s, border-color .15s; }
.post-card:hover { background: var(--paper-2); }
.post-card a { text-decoration: none; color: inherit; display: block; }
.post-card .post-title { font-weight: 600; font-size: 16px; color: var(--ink); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.post-card .post-title .arrow { font-family: "JetBrains Mono", monospace; font-size: 14px; color: var(--ink-4); transition: transform .15s; }
.post-card:hover .post-title .arrow { transform: translateX(3px); }
.post-card .post-desc { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-top: 2px; }
.post-card .post-meta { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--ink-4); margin-top: 8px; letter-spacing: .05em; text-transform: uppercase; display: flex; gap: 12px; }
.project-badge { display: inline-block; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; border: 1px solid; }
.badge-oyeme { color: #B65C3A; border-color: #B65C3A; }
.badge-shredlock { color: var(--accent); border-color: var(--accent); }
.badge-general { color: var(--ink-3); border-color: var(--ink-4); }
.badge-homepage { color: #2878a4; border-color: #2878a4; }
[data-theme="dark"] .badge-homepage { color: #58a4d0; border-color: #58a4d0; }
.badge-case { color: #c23b3b; border-color: #c23b3b; }
[data-theme="dark"] .badge-case { color: #e05252; border-color: #e05252; }
/* ── Post article ── */
article { }
.post-header { margin-bottom: 48px; }
.post-header .eyebrow { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.post-header h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; margin-bottom: 24px; }
.post-header .lede { font-size: 15px; color: var(--ink-2); line-height: 1.6; font-style: italic; }
article h2 { font-size: 18px; font-weight: 600; margin-top: 36px; margin-bottom: 12px; letter-spacing: -0.01em; }
article p { font-size: 15px; color: var(--ink-2); line-height: 1.7; margin-bottom: 16px; }
article p strong { color: var(--ink); font-weight: 600; }
article a { color: var(--ink); border-bottom: 1px dashed var(--ink-4); text-decoration: none; transition: color .15s, border-color .15s; }
article a:hover { color: var(--link-hover, var(--accent)); border-color: var(--link-hover, var(--accent)); }
article ul, article ol { font-size: 15px; color: var(--ink-2); line-height: 1.7; margin-bottom: 16px; padding-left: 20px; }
article li { margin-bottom: 6px; }
/* ── Inline code ── */
article code { font-family: "JetBrains Mono", monospace; font-size: 13px; background: var(--paper-2); padding: 1px 5px; border-radius: 3px; color: var(--ink-2); transition: background .2s; }
/* ── Code blocks ── */
article pre { background: var(--code-bg); color: var(--code-fg); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; line-height: 1.6; }
article pre code { background: none; padding: 0; font-size: 12.5px; color: inherit; }
.kw { color: var(--code-keyword); } /* keywords: const, if, return, async, await */
.st { color: var(--code-string); } /* strings, numbers */
.cm { color: var(--code-comment); font-style: italic; } /* comments */
.fn { color: var(--code-fn); } /* function names */
.op { color: var(--ink-4); } /* operators, punctuation */
/* ── Site map / directory tree ── */
/* Shared: anchor styling for any .map-tree variant */
.map-tree { font-family: "JetBrains Mono", monospace; }
.map-tree a { color: var(--ink); text-decoration: none; border-bottom: 1px dashed var(--ink-4); transition: color .15s, border-color .15s; }
.map-tree a:hover { color: var(--link-hover, var(--accent)); border-color: var(--link-hover, var(--accent)); }
.map-tree .tree-desc { color: var(--ink-4); font-size: 11px; }
/* Flat tree (ul/li with ::before tree chars) */
ul.map-tree { list-style: none; padding: 0; font-size: 13px; line-height: 2; }
ul.map-tree li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
ul.map-tree li::before { content: '├── '; color: var(--ink-4); }
ul.map-tree li:last-child::before { content: '└── '; }
/* Hierarchical tree (literal box-drawing chars in a pre-wrapped block) */
div.map-tree { font-size: 13px; line-height: 1.9; color: var(--ink-4); white-space: pre; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 24px; }
div.map-tree .root { color: var(--ink-3); }
div.map-tree .muted { color: var(--ink-4); }
/* ── Callout box ── */
.callout { background: var(--paper-2); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; padding: 14px 16px; margin-bottom: 20px; font-size: 14px; color: var(--ink-2); line-height: 1.6; transition: background .2s; }
/* ── Footer ── */
footer { margin-top: 48px; border-top: 1px solid var(--footer-border); padding-top: 16px; font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-4); }
/* ── AI disclosure ── */
.ai-disclosure { font-size: 12px; font-style: italic; color: var(--ink-4); line-height: 1.6; padding-top: 32px; }
@media (min-width: 700px) {
body { max-width: 680px; padding: 56px 24px 80px; }
.post-header h1 { font-size: 32px; }
.hub-title { font-size: 32px; }
}