/* g-host-shell - terminal aesthetic, optimised for long-form reading.
   Dashboard's mood (deep blacks, ghost-blue accent, mono headers) but
   body text in a readable serif so 800-word essays do not fatigue. */

:root {
  --bg-deep: #050505;
  --bg-panel: #0d0d0d;
  --bg-accent: #151515;
  --border-dim: #1a1a1a;
  --border-bright: #333;
  --text-dim: #777;
  --text-body: #c8cdd1;
  --text-bright: #e8ecef;
  --ghost-blue: #00aaff;
  --ghost-green: #00ff66;
  --ghost-red: #ff3333;
  --ghost-purple: #8a2be2;
  --ghost-amber: #ffae00;
}

@font-face {
  font-family: 'JetBrainsMono';
  src: url('https://fonts.cdnfonts.com/s/15206/JetBrainsMono-Regular.woff2') format('woff2');
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg-deep); color: var(--text-body); }

body {
  font-family: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.7;
  min-height: 100vh;
  /* the dashboard scanline overlay - subtle so it does not hurt body text */
  background-image:
    linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.18) 50%),
    linear-gradient(90deg, rgba(255,0,0,0.04), rgba(0,255,0,0.015), rgba(0,0,255,0.04));
  background-size: 100% 3px, 6px 100%;
  background-attachment: fixed;
}

a { color: var(--ghost-blue); text-decoration: none; border-bottom: 1px dotted var(--ghost-blue); }
a:hover { background: var(--bg-accent); }

/* monospace for everything that "is the machine" */
.mono, code, pre, kbd, samp, .site-nav, .site-meta, .post-meta, .tag, .byline {
  font-family: 'JetBrainsMono', 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
}

/* --- HEADER (the prompt) ----------------------------------------- */
.site-header {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-bright);
  padding: 14px 24px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header-inner {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-title {
  font-family: 'JetBrainsMono', monospace;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.site-title a { color: var(--text-bright); border: none; }
.site-title .prompt { color: var(--ghost-green); margin-right: 6px; }
.site-title .cursor {
  display: inline-block;
  width: 8px;
  height: 16px;
  background: var(--ghost-blue);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: blink 1.05s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.site-nav {
  font-size: 13px;
  display: flex;
  gap: 18px;
}
.site-nav a {
  color: var(--text-dim);
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.site-nav a:hover, .site-nav a.active { color: var(--ghost-blue); background: none; }

/* --- LAYOUT ------------------------------------------------------- */
.site-main { max-width: 920px; margin: 0 auto; padding: 48px 24px 96px; }

/* --- HOMEPAGE / INDEX --------------------------------------------- */
.site-intro {
  border: 1px solid var(--border-dim);
  background: var(--bg-panel);
  padding: 24px 28px;
  margin-bottom: 48px;
  position: relative;
}
.site-intro::before {
  content: "$ cat /etc/g-host/about";
  position: absolute;
  top: -10px;
  left: 16px;
  background: var(--bg-deep);
  color: var(--ghost-green);
  font-family: 'JetBrainsMono', monospace;
  font-size: 11px;
  padding: 0 8px;
}
.site-intro p { font-size: 16px; color: var(--text-body); margin: 0; }
.site-intro p + p { margin-top: 12px; }

.post-list { list-style: none; }
.post-card {
  border-top: 1px dashed var(--border-bright);
  padding: 28px 0 32px;
}
.post-card:last-child { border-bottom: 1px dashed var(--border-bright); }
.post-card-meta {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.post-card-meta .tag { color: var(--ghost-amber); }
.post-card-meta .date { color: var(--ghost-blue); }
.post-card-title {
  font-family: 'JetBrainsMono', monospace;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 12px;
}
.post-card-title a { color: var(--text-bright); border: none; }
.post-card-title a:hover { color: var(--ghost-blue); }
.post-card-excerpt {
  font-size: 16px;
  color: var(--text-body);
  margin-bottom: 12px;
}
.post-card-readmore {
  font-family: 'JetBrainsMono', monospace;
  font-size: 12px;
  color: var(--ghost-green);
  border: none;
}
.post-card-readmore:hover { color: var(--ghost-blue); background: none; }
.post-card-readmore::before { content: "→ "; }

/* --- POST PAGE ---------------------------------------------------- */
.post-header { margin-bottom: 36px; }
.post-meta {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.post-meta .tag { color: var(--ghost-amber); }
.post-meta .date { color: var(--ghost-blue); }
.post-meta .reading-time { color: var(--text-dim); }
.post-meta .reading-time::before { content: " | "; color: var(--border-bright); }

.post-title {
  font-family: 'JetBrainsMono', monospace;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-bright);
  margin-bottom: 16px;
}
.post-excerpt {
  font-size: 19px;
  color: var(--text-dim);
  font-style: italic;
  border-left: 3px solid var(--ghost-blue);
  padding-left: 20px;
  margin-bottom: 32px;
}

.post-content {
  font-size: 18px;
  line-height: 1.8;
  color: var(--text-body);
}
.post-content > * + * { margin-top: 22px; }
.post-content h2, .post-content h3, .post-content h4 {
  font-family: 'JetBrainsMono', monospace;
  color: var(--text-bright);
  letter-spacing: -0.01em;
  margin-top: 40px;
  margin-bottom: 14px;
}
.post-content h2 { font-size: 22px; padding-bottom: 6px; border-bottom: 1px solid var(--border-bright); }
.post-content h2::before { content: "## "; color: var(--ghost-green); }
.post-content h3 { font-size: 18px; }
.post-content h3::before { content: "### "; color: var(--ghost-green); }
.post-content h4 { font-size: 16px; }
.post-content h4::before { content: "#### "; color: var(--ghost-green); }

.post-content p { color: var(--text-body); }
.post-content strong { color: var(--text-bright); }
.post-content em { color: var(--ghost-amber); font-style: normal; }
.post-content blockquote {
  border-left: 3px solid var(--ghost-purple);
  padding-left: 22px;
  color: var(--text-dim);
  font-style: italic;
}
.post-content ul, .post-content ol { padding-left: 28px; }
.post-content li { margin-bottom: 8px; }
.post-content li::marker { color: var(--ghost-blue); }

.post-content code {
  background: var(--bg-accent);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 0.9em;
  color: var(--ghost-amber);
}
.post-content pre {
  background: var(--bg-panel);
  border: 1px solid var(--border-bright);
  border-left: 3px solid var(--ghost-green);
  padding: 16px 18px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.55;
}
.post-content pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--text-bright);
}

.post-content hr {
  border: none;
  border-top: 1px dashed var(--border-bright);
  margin: 44px 0;
}

.post-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.post-content th, .post-content td {
  border: 1px solid var(--border-dim);
  padding: 10px 14px;
}
.post-content th {
  background: var(--bg-panel);
  color: var(--text-bright);
  font-family: 'JetBrainsMono', monospace;
  text-align: left;
}

.post-content img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border-dim);
}
/* Koenig editor wide / full / standard image widths */
.kg-width-wide { max-width: 1100px; margin-left: -90px; }
.kg-width-full { max-width: 100vw; margin-left: calc(50% - 50vw); }
.kg-image-card figcaption {
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  font-style: italic;
  margin-top: 8px;
}
@media (max-width: 1100px) { .kg-width-wide { max-width: 100%; margin-left: 0; } }

.post-footer {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px dashed var(--border-bright);
  font-size: 13px;
  color: var(--text-dim);
}
.post-footer .byline { color: var(--ghost-green); }
.post-footer .byline::before { content: "$ whoami\n"; white-space: pre; color: var(--text-dim); display: block; }

/* --- TAG / AUTHOR PAGES ------------------------------------------- */
.archive-header {
  border: 1px solid var(--border-bright);
  background: var(--bg-panel);
  padding: 20px 24px;
  margin-bottom: 36px;
  position: relative;
}
.archive-header::before {
  content: "$ ls -la /var/log/posts";
  position: absolute;
  top: -10px;
  left: 14px;
  background: var(--bg-deep);
  color: var(--ghost-green);
  font-family: 'JetBrainsMono', monospace;
  font-size: 11px;
  padding: 0 8px;
}
.archive-title {
  font-family: 'JetBrainsMono', monospace;
  font-size: 18px;
  color: var(--ghost-blue);
}
.archive-description {
  font-size: 14px;
  color: var(--text-dim);
  margin-top: 6px;
}

/* --- PAGINATION --------------------------------------------------- */
.pagination {
  display: flex;
  justify-content: space-between;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px dashed var(--border-bright);
  font-family: 'JetBrainsMono', monospace;
  font-size: 13px;
}
.pagination a { color: var(--ghost-blue); border: none; }
.pagination a:hover { color: var(--ghost-green); background: none; }
.pagination .older::after { content: " →"; }
.pagination .newer::before { content: "← "; }

/* --- FOOTER ------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border-bright);
  background: var(--bg-panel);
  padding: 32px 24px;
  margin-top: 96px;
  font-family: 'JetBrainsMono', monospace;
  font-size: 12px;
  color: var(--text-dim);
}
.site-footer-inner {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
}
.site-footer a { color: var(--text-dim); border: none; }
.site-footer a:hover { color: var(--ghost-blue); }
.site-footer .uptime { color: var(--ghost-green); }
.site-footer .uptime::before { content: "● "; }

/* --- RESPONSIVE --------------------------------------------------- */
@media (max-width: 680px) {
  body { font-size: 16px; }
  .site-main { padding: 28px 18px 64px; }
  .post-title { font-size: 24px; }
  .post-content { font-size: 16px; }
  .site-header-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .site-nav { flex-wrap: wrap; gap: 12px; font-size: 12px; }
}

/* --- KOENIG / GHOST CARDS ----------------------------------------- */
.kg-bookmark-card {
  border: 1px solid var(--border-bright);
  background: var(--bg-panel);
  padding: 16px;
  display: flex;
  gap: 16px;
}
.kg-bookmark-content { flex: 1; }
.kg-bookmark-title { color: var(--text-bright); font-family: 'JetBrainsMono', monospace; }
.kg-bookmark-description { color: var(--text-dim); font-size: 14px; margin-top: 6px; }
.kg-callout-card {
  border: 1px solid var(--ghost-amber);
  background: rgba(255, 174, 0, 0.05);
  padding: 14px 18px;
  display: flex;
  gap: 12px;
}
.kg-callout-emoji { font-size: 20px; }