/* =========================================================================
   Miguel Santos — "the terminal as editorial." Dark.
   A considered dark theme: layered ink surfaces (never pure black), off-white
   text with a real hierarchy, and a single muted teal signal used only for
   prompts, status, and links. The personality is the typography and the
   terminal vernacular, not a neon glow.

   Type:   IBM Plex Sans (display + body) / IBM Plex Mono (structure, code)
   Palette: deep ink base, raised panel, off-white text, muted teal signal
   ========================================================================= */

:root {
  --bg:        #0e1217;   /* deep ink, faint blue-green undertone, not #000 */
  --panel:     #161c23;   /* raised surface: footer, table head, hover */
  --ink:       #eef2f6;   /* brightest: headings, titles */
  --body:      #b2bdc8;   /* body text */
  --muted:     #6f7d8a;   /* meta, captions */
  --signal:    #19bd95;   /* dots, prompt sigil, brand mark */
  --link:      #38d2ad;   /* links + hover — brighter for dark legibility */
  --rule:      #232b34;   /* hairlines, borders */
  --code-bg:   #0a0d11;   /* code: a deep terminal window */
  --code-fg:   #d8dee8;
  --code-bd:   #232c35;
  --chip-bg:   rgba(25, 189, 149, 0.14);
  --maxw:      720px;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

::selection { background: rgba(25, 189, 149, 0.28); color: var(--ink); }

/* --- Nav ---------------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14, 18, 23, 0.82);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
  height: 62px; display: flex; align-items: center; justify-content: space-between;
}
.brand {
  font-family: var(--mono); font-weight: 600; font-size: 1rem; color: var(--ink);
}
.brand:hover { color: var(--ink); text-decoration: none; }
.brand-path { color: var(--signal); }
.nav-links { font-family: var(--mono); font-size: 0.9rem; }
.nav-links a { color: var(--muted); margin-left: 22px; }
.nav-links a:hover { color: var(--link); text-decoration: none; }

/* --- Page shell --------------------------------------------------------- */

.page {
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
  min-height: calc(100vh - 62px - 72px);
}

/* --- Hero: the shell prompt (signature) --------------------------------- */

.hero { padding: 76px 0 44px; border-bottom: 1px solid var(--rule); }

.prompt { font-family: var(--mono); font-size: 0.95rem; color: var(--muted); margin-bottom: 22px; }
.prompt-sigil { color: var(--signal); font-weight: 600; margin-right: 8px; }
.prompt-cmd { color: var(--ink); }
.prompt-cmd::after {
  content: "";
  display: inline-block; width: 8px; height: 1.05em;
  background: var(--signal); margin-left: 6px; vertical-align: text-bottom;
  animation: blink 1.2s steps(1) infinite;
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.hero-title {
  margin: 0 0 18px;
  font-size: 3rem; font-weight: 700; line-height: 1.06;
  letter-spacing: -0.03em; color: var(--ink); max-width: 17ch;
}
.hero-tagline { margin: 0; font-size: 1.2rem; line-height: 1.55; color: var(--muted); max-width: 48ch; }

/* --- Post feed ---------------------------------------------------------- */

.post-feed { padding: 18px 0 56px; }

.feed-label { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); padding: 14px 0; margin-bottom: 4px; }
.feed-label .prompt-sigil { margin-right: 8px; }

.post-card { border-top: 1px solid var(--rule); }
.post-card:last-child { border-bottom: 1px solid var(--rule); }
.post-card-link { display: block; padding: 28px 0; color: inherit; }
.post-card-link:hover { text-decoration: none; }
.post-card-link:hover .post-card-title { color: var(--link); }

.post-card-status, .post-status {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 0.82rem; color: var(--muted); margin-bottom: 10px;
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--signal); box-shadow: 0 0 0 3px rgba(25, 189, 149, 0.20);
  flex: none;
}
.post-card-tag {
  font-family: var(--mono); font-size: 0.74rem; color: var(--link);
  background: var(--chip-bg); padding: 2px 8px; border-radius: 4px;
}
.status-sep { color: var(--rule); }

.post-card-title {
  margin: 0 0 8px; font-size: 1.5rem; font-weight: 600; line-height: 1.22;
  letter-spacing: -0.02em; color: var(--ink); transition: color 0.12s ease;
}
.post-card-excerpt { margin: 0 0 12px; color: var(--body); font-size: 1rem; }
.post-card-more { font-family: var(--mono); font-size: 0.85rem; font-weight: 500; color: var(--link); }

/* --- Tool icons (original geometric marks, tinted by palette) ----------- */

.tool-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none;
  border: 1px solid var(--rule); border-radius: 6px;
  background: var(--chip-bg); color: var(--link);
  vertical-align: middle;
}
.tool-icon svg { width: 15px; height: 15px; }

/* In the feed, the mark sits just left of the title. */
.post-card-title .tool-icon {
  margin-right: 10px; transform: translateY(-1px);
  transition: border-color 0.12s ease, color 0.12s ease;
}
.post-card-link:hover .tool-icon { border-color: var(--link); }

/* On the article, a labeled mark above the title. */
.post-tool-mark {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 16px;
}
.post-tool-name {
  font-family: var(--mono); font-size: 0.8rem; font-weight: 500;
  color: var(--link); letter-spacing: 0.01em;
}

/* --- Merged badge (git-merge mark, signals a landed PR) ----------------- */

.merged-badge {
  display: inline-flex; align-items: center; gap: 5px;
  vertical-align: middle; margin-left: 12px;
  font-family: var(--mono); font-size: 0.62em; font-weight: 600;
  letter-spacing: 0.04em; text-transform: lowercase;
  color: var(--signal);
  background: var(--chip-bg); border: 1px solid rgba(25, 189, 149, 0.35);
  padding: 3px 8px 3px 6px; border-radius: 999px;
  position: relative; top: -0.12em;
}
.merged-badge svg { width: 13px; height: 13px; flex: none; }
.merged-badge-text { line-height: 1; }
/* In the feed the title turns teal on hover; keep the badge legible there. */
.post-card-link:hover .merged-badge { border-color: var(--link); }

/* --- Post / page -------------------------------------------------------- */

.post { padding: 44px 0 64px; }
.post-back { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); display: inline-block; margin-bottom: 24px; }
.post-back:hover { color: var(--link); text-decoration: none; }
.post-title { margin: 0 0 16px; font-size: 2.4rem; font-weight: 700; line-height: 1.12; letter-spacing: -0.03em; color: var(--ink); }
.post-status { margin: 0 0 40px; }

.post-body { font-size: 1.06rem; }
.post-body > *:first-child { margin-top: 0; }
.post-body h2 {
  margin: 2em 0 0.6em; font-size: 1.45rem; font-weight: 600; letter-spacing: -0.02em;
  color: var(--ink); padding-bottom: 0.3em; border-bottom: 1px solid var(--rule);
}
.post-body h3 { margin: 1.7em 0 0.5em; font-size: 1.18rem; font-weight: 600; color: var(--ink); }
.post-body p, .post-body ul, .post-body ol { margin: 0 0 1.25em; }
.post-body strong { color: var(--ink); font-weight: 600; }
.post-body a { font-weight: 500; }

/* --- Code --------------------------------------------------------------- */

code {
  font-family: var(--mono); font-size: 0.85em;
  background: var(--chip-bg); color: #66e2c1;
  padding: 0.13em 0.4em; border-radius: 5px;
}
pre {
  background: var(--code-bg); color: var(--code-fg);
  border: 1px solid var(--code-bd); border-radius: 10px;
  padding: 18px 20px; overflow-x: auto;
  font-family: var(--mono); font-size: 0.84rem; line-height: 1.6; margin: 0 0 1.5em;
}
pre code { background: none; color: inherit; padding: 0; font-size: inherit; }

/* --- Tables ------------------------------------------------------------- */

.post-body table { width: 100%; border-collapse: collapse; margin: 0 0 1.6em; font-size: 0.95rem; }
.post-body th, .post-body td { border: 1px solid var(--rule); padding: 0.55rem 0.75rem; text-align: left; vertical-align: top; }
.post-body th { background: var(--panel); color: var(--ink); font-weight: 600; font-family: var(--mono); font-size: 0.85rem; }

/* --- Blockquote --------------------------------------------------------- */

.post-body blockquote { margin: 0 0 1.5em; padding: 4px 0 4px 18px; border-left: 3px solid var(--signal); color: var(--muted); }
.post-body blockquote p { margin: 0; }

/* --- Footer ------------------------------------------------------------- */

.footer { border-top: 1px solid var(--rule); background: var(--panel); }
.footer-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-family: var(--mono); font-size: 0.84rem; color: var(--muted);
}
.footer-inner .comment { color: var(--muted); }
.footer-links a { color: var(--muted); margin-left: 16px; }
.footer-links a:first-child { margin-left: 0; }
.footer-links a:hover { color: var(--link); }

/* --- Responsive + a11y -------------------------------------------------- */

@media (max-width: 600px) {
  body { font-size: 17px; }
  .hero { padding: 52px 0 36px; }
  .hero-title { font-size: 2.2rem; }
  .post-title { font-size: 1.8rem; }
  .nav-links a { margin-left: 14px; }
  .footer-inner { flex-direction: column; }
}

*:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  .prompt-cmd::after { animation: none; }
  * { transition: none !important; }
}