*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #1b1518;
  --bg2:      #211b1e;
  --bg3:      #2a2124;
  --border:   #362b31;
  --muted:    #5a464e;
  --dim:      #8a7078;
  --body:     #faf9d2;
  --bright:   #fdfcec;
  --accent:   #e19836;
  --tag-bg:   #2a1f22;
  --tag-fg:   #8a6570;
  --mono:     'JetBrains Mono', monospace;
}

html { background: var(--bg); color: var(--body); font-family: var(--mono); font-size: 13px; line-height: 1.7; }
body { max-width: 1100px; margin: 0 auto; padding: 0 40px; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--bright); }

/* ── ticker ── */
.ticker-rail { overflow: hidden; background: var(--bg2); border-bottom: 1px solid var(--border); padding: 5px 0; position: sticky; top: 0; z-index: 10; }
.ticker-inner { display: flex; white-space: nowrap; animation: scroll-left 28s linear infinite; width: max-content; }
.ticker-inner:hover { animation-play-state: paused; }
.ticker-item { padding: 0 20px; color: var(--muted); font-size: 11px; letter-spacing: 0.03em; }
.ticker-sep { color: var(--border); }
@keyframes scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── nav ── */
nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 0 16px; border-bottom: 1px solid var(--border); }
.nav-logo { color: var(--bright); font-size: 13px; font-weight: 500; letter-spacing: -0.01em; }
.nav-logo span { color: var(--accent); }
.nav-right { display: flex; align-items: center; gap: 4px; }
.nav-links { display: flex; gap: 4px; }
.nav-links a { color: var(--muted); font-size: 11px; padding: 3px 8px; border-radius: 3px; transition: color 0.15s; }
.nav-links a:hover { color: var(--body); }

/* ── hero ── */
.hero { padding: 56px 0 40px; border-bottom: 1px solid var(--border); }
.hero-layout { display: grid; grid-template-columns: auto 1fr; align-items: stretch; gap: 48px; }
.hero-left { display: flex; flex-direction: column; justify-content: center; }
.hero-right { display: flex; align-items: stretch; }
.hero-right .featured { flex: 1; margin-bottom: 0; display: flex; flex-direction: column; justify-content: center; }
.hero-eyebrow { font-size: 10px; letter-spacing: 0.12em; color: var(--dim); text-transform: uppercase; margin-bottom: 14px; }
.hero-title { font-size: 26px; font-weight: 500; color: var(--bright); letter-spacing: -0.02em; line-height: 1.3; margin-bottom: 12px; }
.hero-title .accent { color: var(--accent); }
.accent { color: var(--accent); }
.hero-desc { color: var(--dim); font-size: 12px; line-height: 1.8; margin-top: 16px; max-width: 560px; }
.hero-stats { list-style: none; padding: 0; margin-top: 24px; display: flex; flex-direction: row; gap: 28px; }
.hero-stats li { display: flex; align-items: baseline; gap: 8px; }
.stat-val { font-size: 15px; font-weight: 500; color: var(--bright); }
.stat-lbl { font-size: 10px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }

/* ── section headers ── */
.section-head { display: flex; align-items: center; gap: 10px; padding: 28px 0 16px; }
.section-head-label { font-size: 10px; color: var(--muted); letter-spacing: 0.1em; }
.section-head-line { flex: 1; height: 1px; background: var(--border); }
.section-head-link { font-size: 10px; color: var(--muted); letter-spacing: 0.05em; }
.section-head-link:hover { color: var(--body); }

/* ── post list ── */
.post-list { list-style: none; }
.post-item { padding: 14px 0; border-bottom: 1px solid var(--bg3); display: grid; grid-template-columns: 80px 1fr; gap: 0 16px; align-items: start; }
.post-item:last-child { border-bottom: none; }
.post-date { font-size: 10px; color: var(--muted); padding-top: 3px; letter-spacing: 0.04em; white-space: nowrap; }
.post-title { color: var(--bright); font-size: 13px; font-weight: 400; display: block; margin-bottom: 6px; transition: color 0.12s; }
.post-title:hover { color: var(--accent); }
.post-excerpt { font-size: 11px; color: var(--dim); line-height: 1.7; margin-bottom: 8px; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { font-size: 10px; color: var(--tag-fg); background: var(--tag-bg); padding: 2px 8px; border-radius: 2px; border: 1px solid var(--border); transition: color 0.12s; cursor: pointer; }
.tag:hover { color: var(--body); }

/* ── featured post ── */
.featured { background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 20px 22px; margin-bottom: 6px; }
.featured-eyebrow { font-size: 10px; color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
.featured-title { font-size: 15px; font-weight: 500; color: var(--bright); margin-bottom: 8px; display: block; }
.featured-title:hover { color: var(--accent); }
.featured-body { font-size: 11px; color: var(--dim); line-height: 1.8; margin-bottom: 14px; }

/* ── sidebar two-col ── */
.two-col { display: grid; grid-template-columns: 1fr 260px; gap: 48px; margin-bottom: 40px; }

/* ── tag cloud ── */
.tag-cloud { padding: 16px 18px; background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; }
.tag-cloud-title { font-size: 10px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; }
.tag-cloud-items { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-cloud-item { font-size: 10px; color: var(--muted); background: var(--tag-bg); border: 1px solid var(--border); padding: 3px 9px; border-radius: 2px; cursor: pointer; transition: color 0.12s; }
.tag-cloud-item:hover { color: var(--body); }

/* ── about box ── */
.about-box { padding: 16px 18px; background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; margin-top: 16px; }
.about-box p { font-size: 11px; color: var(--dim); line-height: 1.9; }
.about-box .handle { color: var(--accent); }
.about-box .links { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.about-box .links a { font-size: 10px; color: var(--muted); }
.about-box .links a:hover { color: var(--body); }
.about-box .links a::before { content: '→ '; color: var(--border); }

/* ── footer ── */
footer { border-top: 1px solid var(--border); padding: 20px 0 32px; display: flex; justify-content: space-between; align-items: center; }
.footer-copy { font-size: 10px; color: var(--muted); }
.footer-updated { font-size: 10px; color: var(--border); }

/* ── search bar ── */
.search-bar { display: flex; gap: 8px; align-items: center; margin-top: 0; }
.search-input { flex: 1; background: var(--bg2); border: 1px solid var(--border); color: var(--body); font-family: var(--mono); font-size: 11px; padding: 7px 12px; border-radius: 3px; outline: none; }
.search-input::placeholder { color: var(--muted); }
.search-input:focus { border-color: var(--dim); }
.search-hint { font-size: 10px; color: var(--muted); }

/* ── nav search button ── */
.nav-search-btn { background: none; border: none; cursor: pointer; color: var(--muted); padding: 4px 6px; display: flex; align-items: center; border-radius: 3px; transition: color 0.15s; }
.nav-search-btn:hover { color: var(--body); }

/* ── about page ── */
.about-page { display: none; }
.about-page.active { display: block; }
.about-long p + p { margin-top: 0; }
.about-p { font-size: 12px; color: var(--dim); line-height: 1.9; margin-bottom: 12px; }
.about-list { list-style: none; padding: 0; margin-bottom: 4px; }
.about-list li { font-size: 12px; color: var(--dim); line-height: 1.9; padding: 3px 0; border-bottom: 1px solid var(--bg3); }
.about-list li:last-child { border-bottom: none; }
.about-list li::before { content: '› '; color: var(--muted); }
.about-tool { color: var(--body); font-size: 11px; }

/* ── search page ── */
.search-page { display: none; }
.search-page.active { display: block; }

/* ── posts page ── */
.posts-page { display: none; }
.posts-page.active { display: block; }
.post-page { display: none; }
.post-page.active { display: block; }
.main-page { display: block; }
.main-page.hidden { display: none; }
.post-header { padding: 40px 0 28px; border-bottom: 1px solid var(--border); margin-bottom: 32px; }
.post-back { font-size: 11px; color: var(--muted); margin-bottom: 24px; display: inline-block; cursor: pointer; }
.post-back:hover { color: var(--body); }
.post-back::before { content: '← '; }
.post-h1 { font-size: 20px; font-weight: 500; color: var(--bright); letter-spacing: -0.02em; line-height: 1.35; margin-bottom: 12px; }
.post-meta { font-size: 10px; color: var(--muted); letter-spacing: 0.04em; }
.post-meta span { color: var(--dim); }
.post-body { max-width: 100%; }
.post-body h2 { font-size: 14px; font-weight: 500; color: var(--bright); margin: 28px 0 10px; }
.post-body h3 { font-size: 12px; font-weight: 500; color: var(--body); margin: 20px 0 8px; letter-spacing: 0.04em; }
.post-body p { font-size: 12px; color: var(--dim); line-height: 1.9; margin-bottom: 14px; }
.post-body ul, .post-body ol { font-size: 12px; color: var(--dim); line-height: 1.9; margin-bottom: 14px; padding-left: 20px; }
.post-body li { margin-bottom: 4px; }
.post-body li code { background: var(--bg3); padding: 1px 5px; border-radius: 2px; font-size: 11px; }
.post-body a { color: var(--accent); text-decoration: none; }
.post-body a:hover { color: var(--bright); }
.post-body strong { color: var(--bright); font-weight: 500; }
.post-body pre { background: var(--bg2); border: 1px solid var(--border); border-radius: 3px; padding: 16px; overflow-x: auto; margin: 16px 0; }
.post-body code { font-family: var(--mono); font-size: 11px; color: var(--body); }
.post-body p code { background: var(--bg3); padding: 1px 5px; border-radius: 2px; font-size: 11px; }
.post-body .note { background: var(--bg2); border-left: 2px solid var(--accent); padding: 10px 14px; margin: 16px 0; font-size: 11px; color: var(--dim); }
.post-body .alert { background: #2a1518; border: 1px solid #6b2a30; border-left: 3px solid #c94a55; border-radius: 3px; padding: 12px 16px; margin: 16px 0; font-size: 11px; color: #c98a8e; }
.post-body .alert::before { content: '⚠ warning — '; color: #c94a55; font-weight: 500; }
.post-body .info { background: #1a1810; border: 1px solid #3a3020; border-left: 3px solid var(--accent); border-radius: 3px; padding: 12px 16px; margin: 16px 0; font-size: 11px; color: var(--dim); }
.post-body .info::before { content: 'ℹ info — '; color: var(--accent); font-weight: 500; }
.post-body img { max-width: 100%; height: auto; display: block; border: 1px solid var(--border); border-radius: 3px; margin: 20px 0; }

@media (max-width: 720px) {
  body { padding: 0 20px; }
  .two-col { grid-template-columns: 1fr; }
  .hero-layout { grid-template-columns: 1fr; }
  .hero-right { margin-top: 24px; }
  .hero-stats { flex-direction: row; gap: 24px; }
  .post-item { grid-template-columns: 1fr; }
  .post-date { padding-top: 0; margin-bottom: 4px; }
  nav { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-inner { animation: none; }
}

/* ── hugo overrides: real pages don't need spa toggling ── */
.post-page, .main-page, .search-page, .posts-page, .about-page { display: block; }
.post-page.active, .main-page.hidden { display: block; }

/* ── syntax highlighting (hugo chroma) ── */
.highlight { background: #111018; border: 1px solid var(--border); border-radius: 3px; margin: 16px 0; position: relative; overflow-x: auto; }
.highlight[data-lang]::before { content: attr(data-lang); position: absolute; top: 8px; right: 12px; font-size: 10px; color: var(--muted); letter-spacing: 0.08em; text-transform: lowercase; z-index: 1; pointer-events: none; }
.highlight pre { margin: 0; padding: 14px 40px 14px 0; border: none; background: none; white-space: pre; word-wrap: normal; overflow-x: visible; }
.highlight .ln { display: inline-block; min-width: 2em; padding-right: 12px; margin-right: 14px; text-align: right; color: var(--muted); border-right: 1px solid var(--border); user-select: none; }
.highlight .cl { display: inline; }
.chroma { background: #111018; color: var(--body); }
.chroma .err { color: var(--body); }
.chroma .k, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .kt { color: #c97a8a; }
.chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .sd, .chroma .s2, .chroma .se, .chroma .sh, .chroma .si, .chroma .sx, .chroma .sr, .chroma .s1, .chroma .ss { color: #a8c4b8; }
.chroma .c, .chroma .ch, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cpf { color: var(--muted); font-style: italic; }
.chroma .n, .chroma .na, .chroma .nb, .chroma .nc, .chroma .nd, .chroma .ni, .chroma .ne, .chroma .nf, .chroma .nl, .chroma .nn, .chroma .nx, .chroma .py, .chroma .nt, .chroma .nv, .chroma .vc, .chroma .vg, .chroma .vi, .chroma .vm { color: var(--body); }
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo { color: #c9a87a; }
.chroma .o, .chroma .ow { color: var(--dim); }
.chroma .p { color: var(--body); }




/* ── notes split pane ── */
.notes-layout { display: grid; grid-template-columns: 240px 1fr; gap: 0; min-height: 70vh; border-bottom: 1px solid var(--border); margin-bottom: 40px; }
.notes-sidebar { border-right: 1px solid var(--border); padding-right: 24px; padding-bottom: 40px; }
.notes-term { display: block; padding: 8px 10px; border-radius: 3px; margin-bottom: 2px; text-decoration: none; border: 1px solid transparent; transition: background 0.12s, color 0.12s; }
.notes-term:hover { background: var(--bg2); }
.notes-term.active { background: var(--bg2); border-color: var(--border); }
.notes-term-title { display: block; font-size: 12px; color: var(--body); }
.notes-term.active .notes-term-title { color: var(--bright); }
.notes-term-cat { display: block; font-size: 10px; color: var(--muted); margin-top: 2px; }
.notes-content { padding: 28px 0 40px 40px; min-width: 0; }
.notes-entry { max-width: 720px; }
.notes-empty { display: flex; align-items: center; height: 100%; }
.notes-empty-hint { font-size: 11px; color: var(--muted); }
.notes-entry-header { padding-bottom: 20px; border-bottom: 1px solid var(--border); margin-bottom: 28px; }
.notes-entry-title { font-size: 18px; font-weight: 500; color: var(--bright); letter-spacing: -0.02em; margin-bottom: 6px; }
.notes-entry-cat { font-size: 10px; color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; }
.notes-entry-body img { max-width: 100%; height: auto; display: block; border: 1px solid var(--border); border-radius: 3px; margin: 20px 0; }

@media (max-width: 620px) {
  .notes-layout { grid-template-columns: 1fr; }
  .notes-sidebar { border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 16px; margin-bottom: 24px; }
  .notes-content { padding: 0; }
}

/* ── search result type badge ── */
.search-type { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 7px; border-radius: 2px; border: 1px solid var(--border); flex-shrink: 0; }
.search-type--posts { color: var(--accent); border-color: var(--accent); }
.search-type--notes { color: #7a9cc9; border-color: #7a9cc9; }