/* skeletonsec — barebones theme
   Hand-rolled. Monochrome lab palette, orange as the highlighter.
   Chrome is monospace; long-form prose falls back to a readable system
   stack. No webfonts, no frameworks, no JavaScript. */

:root {
  --bg:     #0d1117;  /* page background                     */
  --panel:  #161b22;  /* code blocks, cards, raised panels   */
  --fg:     #e6edf3;  /* primary text                        */
  --muted:  #8b949e;  /* secondary text (AA on bg)           */
  --orange: #ff7a1a;  /* the highlighter — used sparingly    */
  --line:   #21262d;  /* hairlines                           */
  --green:  #3fb950;  /* status: active/shipped              */
  --red:    #f85149;  /* severity: critical                  */
  --yellow: #d29922;  /* severity: medium                    */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --prose: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

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

html { background: var(--bg); color-scheme: dark; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.7 var(--mono);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.25rem; }

a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--line); }
a:hover { color: var(--orange); border-bottom-color: var(--orange); }

.dim { color: var(--muted); }
.hl  { color: var(--orange); }

/* ---- header ---------------------------------------------------------- */
.site-header { border-bottom: 1px solid var(--line); }
.header-inner {
  display: flex; align-items: center; gap: 0.9rem;
  padding-top: 0.9rem; padding-bottom: 0.9rem;
}
.brand { display: flex; align-items: center; gap: 0.6rem; border: none; }
.brand:hover .brand-word b { color: var(--orange); }
.brand-mark { display: block; color: var(--fg); }
.brand-word { font-size: 1rem; letter-spacing: 0.14em; }
.brand-word b { color: var(--fg); font-weight: 700; }
.site-nav { margin-left: auto; display: flex; gap: 1.1rem; font-size: 0.85rem; }
.site-nav a { border: none; color: var(--muted); }
.site-nav a:hover { color: var(--orange); }
.site-nav a.on { color: var(--fg); border-bottom: 1px solid var(--orange); padding-bottom: 2px; }

main.wrap { padding-top: 2.25rem; padding-bottom: 4rem; }

/* ---- hero (index) ----------------------------------------------------- */
.hero { text-align: center; padding: 2.5rem 0 1.5rem; }
.hero-mark { color: var(--fg); }
.hero-word { font-size: 1.6rem; letter-spacing: 0.16em; margin: 0.9rem 0 0.3rem; font-weight: 400; }
.hero-word b { font-weight: 700; }
.hero-line { color: var(--muted); margin: 0; font-size: 0.9rem; }

.section-title {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2em;
  color: var(--orange); margin: 2.75rem 0 0.9rem;
}
.section-title::before { content: "> "; color: var(--muted); }

/* ---- post lists -------------------------------------------------------- */
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem;
  padding: 0.45rem 0; border-bottom: 1px solid var(--line);
}
.post-list time { color: var(--muted); font-size: 0.8rem; flex: none; }
.post-list li > a:first-of-type { border: none; }
.post-list li > a:first-of-type:hover { color: var(--orange); }
.more { font-size: 0.85rem; }
.year {
  font-size: 0.85rem; color: var(--muted); letter-spacing: 0.2em;
  margin: 2.25rem 0 0.4rem; font-weight: 400;
}

/* ---- chips, tag-chips, badges ------------------------------------------ */
.chip, .tag-chip {
  font-size: 0.72rem; color: var(--muted);
  border: 1px solid var(--line); border-radius: 1rem;
  padding: 0.05rem 0.55rem; white-space: nowrap;
}
.chip:hover, a.tag-chip:hover { color: var(--orange); border-color: var(--orange); }
.chip-series { color: var(--orange); border-color: var(--line); }
.chip-ok { color: var(--green); border-color: var(--line); }
.chip-phase { color: var(--orange); border-color: var(--line); }

.badge {
  display: inline-block; font-size: 0.72rem; line-height: 1.4;
  color: var(--muted); border: 1px solid var(--line); border-radius: 0.3rem;
  padding: 0.02rem 0.45rem; white-space: nowrap; vertical-align: baseline;
}
.badge-cve { color: var(--orange); border-color: var(--orange); }
.badge-sev-critical { color: var(--red); border-color: var(--red); }
.badge-sev-high { color: var(--orange); border-color: var(--orange); }
.badge-sev-medium { color: var(--yellow); border-color: var(--yellow); }
.badge-sev-low, .badge-sev-info, .badge-sev-informational { color: var(--muted); }
.status-active { color: var(--green); border-color: var(--green); }
.status-wip { color: var(--orange); border-color: var(--orange); }

/* ---- cards (projects) --------------------------------------------------- */
.cards { display: grid; gap: 0.9rem; }
@media (min-width: 42rem) { .cards { grid-template-columns: 1fr 1fr; } }
.card, .tool-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 0.4rem; padding: 1rem 1.1rem;
}
.card h3, .tool-card h3 { margin: 0 0 0.4rem; font-size: 0.95rem; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; }
.card h3 a, .tool-card h3 a { border: none; }
.card p, .tool-card p { margin: 0; color: var(--muted); font-size: 0.85rem; }
.tool-card .tool-meta { margin-top: 0.6rem; font-size: 0.78rem; }
.tool-card .install {
  margin: 0.6rem 0 0; padding: 0.45rem 0.7rem; font-size: 0.78rem;
}
.tool-card .install code { background: none; border: none; padding: 0; }

/* ---- post cards (research / writeups indexes) ---------------------------- */
.post-cards { display: grid; gap: 0.9rem; }
.post-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 0.4rem; padding: 0.9rem 1.1rem;
}
.post-card-head {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline;
  font-size: 0.78rem; color: var(--muted); margin-bottom: 0.35rem;
}
.post-card-title { margin: 0; font-size: 0.98rem; }
.post-card-title a { border: none; }
.post-card-title a:hover { color: var(--orange); }
.post-card p { margin: 0.3rem 0 0; font-size: 0.85rem; }
.post-card-target { font-size: 0.8rem; }

/* ---- filter bar (writeups index) ----------------------------------------- */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: baseline;
  margin: 1.2rem 0 1.4rem; padding: 0.7rem 0.9rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 0.4rem;
  font-size: 0.8rem; color: var(--muted);
}
.filter-bar label { display: flex; gap: 0.45rem; align-items: baseline; }
.filter-bar select {
  background: var(--bg); color: var(--fg); font: inherit;
  border: 1px solid var(--line); border-radius: 0.3rem; padding: 0.15rem 0.4rem;
}
.filter-bar select:focus { outline: 1px solid var(--orange); }
.filter-reset {
  background: none; color: var(--muted); font: inherit; cursor: pointer;
  border: 1px solid var(--line); border-radius: 0.3rem; padding: 0.15rem 0.6rem;
}
.filter-reset:hover { color: var(--orange); border-color: var(--orange); }
.filter-count { margin-left: auto; }

/* ---- evidence callout box ------------------------------------------------- */
.evidence-box {
  margin: 1.2rem 0; padding: 0.8rem 1rem;
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--orange); border-radius: 0.4rem;
  font-size: 0.88rem;
}
.evidence-label {
  display: block; font-size: 0.7rem; letter-spacing: 0.2em;
  color: var(--orange); margin-bottom: 0.4rem;
}
.evidence-body > :first-child { margin-top: 0; }
.evidence-body > :last-child { margin-bottom: 0; }

/* ---- trophy wall & timeline (about) --------------------------------------- */
.trophy-list { list-style: none; margin: 0; padding: 0; }
.trophy-list li {
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline;
  padding: 0.45rem 0; border-bottom: 1px solid var(--line);
}
.trophy-list time { color: var(--muted); font-size: 0.8rem; flex: none; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 1px solid var(--line); }
.timeline li { position: relative; padding: 0 0 0.9rem 0.6rem; }
.timeline li::before {
  content: ""; position: absolute; left: -1.28rem; top: 0.55rem;
  width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--orange);
}
.timeline time { color: var(--muted); font-size: 0.78rem; display: block; }
.timeline p { margin: 0.15rem 0 0; font-size: 0.88rem; }

/* ---- now bullets (home) ---------------------------------------------------- */
.now-list { list-style: none; margin: 0; padding: 0; }
.now-list li { padding: 0.3rem 0; border-bottom: 1px solid var(--line); }
.now-list li::before { content: "* "; color: var(--orange); }
.now-list p { display: inline; margin: 0; }

/* ---- facts line (single post) ---------------------------------------------- */
.facts { font-size: 0.8rem; margin: -1.2rem 0 2rem; }
.facts:empty { display: none; }

/* ---- copy button on code blocks --------------------------------------------- */
pre { position: relative; }
.copy-btn {
  position: absolute; top: 0.4rem; right: 0.4rem;
  background: var(--bg); color: var(--muted); font: 0.72rem var(--mono);
  border: 1px solid var(--line); border-radius: 0.3rem;
  padding: 0.1rem 0.5rem; cursor: pointer; opacity: 0.75;
}
.copy-btn:hover { color: var(--orange); border-color: var(--orange); opacity: 1; }

/* ---- pages & posts ------------------------------------------------------- */
.page-title { font-size: 1.35rem; font-weight: 700; margin: 0 0 0.8rem; }
.page-title::before { content: "> "; color: var(--orange); }

.post-meta {
  color: var(--muted); font-size: 0.8rem;
  display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: baseline;
  margin-bottom: 2rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.post-meta .sep { color: var(--line); }

.content { font-size: 0.95rem; }
.prose { font-family: var(--prose); font-size: 1rem; line-height: 1.75; }
.prose code, .content code { font-family: var(--mono); }

.content h2, .content h3 {
  font-family: var(--mono); font-weight: 600; margin: 2rem 0 0.6rem;
}
.content h2 { font-size: 1.05rem; }
.content h2::before { content: "## "; color: var(--orange); }
.content h3 { font-size: 0.95rem; }
.content h3::before { content: "### "; color: var(--muted); }
.content p { margin: 0.9rem 0; }
.content ul { padding-left: 1.4rem; }
.content blockquote {
  margin: 1rem 0; padding: 0.5rem 1rem;
  border-left: 2px solid var(--orange); color: var(--muted);
  background: var(--panel);
}
.content a { border-bottom: 1px solid var(--line); }

pre {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 0.4rem; padding: 0.9rem 1.1rem;
  overflow-x: auto; font-size: 0.85rem; line-height: 1.6;
}
:not(pre) > code {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 0.25rem; padding: 0.05rem 0.35rem; font-size: 0.85em;
}
/* Chroma: keep the panel background, drop the style's own dark color */
.highlight { background: var(--panel) !important; border-radius: 0.4rem; }
.highlight pre { border: 1px solid var(--line); }

img { max-width: 100%; }

/* ---- post layout with TOC ------------------------------------------------ */
@media (min-width: 64rem) {
  .post-layout { display: grid; grid-template-columns: minmax(0, 46rem) 13rem; gap: 2.5rem; }
  .wrap:has(.post-layout) { max-width: 64rem; }
}
.toc { display: none; }
@media (min-width: 64rem) {
  .toc { display: block; }
  .toc-inner { position: sticky; top: 1.5rem; font-size: 0.78rem; }
  .toc-title { color: var(--muted); letter-spacing: 0.2em; font-size: 0.72rem; }
  .toc nav ul { list-style: none; padding-left: 0.9rem; margin: 0.6rem 0; }
  .toc nav > ul { padding-left: 0; }
  .toc a { border: none; color: var(--muted); }
  .toc a:hover { color: var(--orange); }
}

/* ---- series nav ---------------------------------------------------------- */
.series-nav {
  margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 0.8rem; font-size: 0.85rem;
  align-items: baseline;
}
.series-nav .prev { margin-right: auto; }
.series-nav .next { margin-left: auto; }

/* ---- terms ---------------------------------------------------------------- */
.term-list { list-style: none; padding: 0; margin: 1rem 0; }
.term-list li {
  display: flex; align-items: baseline; gap: 0.7rem;
  padding: 0.4rem 0; border-bottom: 1px solid var(--line);
}
.term-list .count { margin-left: auto; color: var(--muted); font-size: 0.8rem; }

/* ---- footer ---------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 0.78rem;
  padding: 1.4rem 0 2.5rem;
}
.site-footer p { margin: 0.2rem 0; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--orange); }

/* ---- 404 -------------------------------------------------------------------- */
.four04-inner { text-align: center; padding: 5rem 1.25rem; }
.four04-inner img { color: var(--fg); margin-bottom: 1.5rem; }
.four04-inner h1 { font-size: 2rem; letter-spacing: 0.3em; margin: 0 0 0.5rem; color: var(--orange); }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}