:root{
  --bg:#0a0b0c;
  --ink:#d7d7d7;
  --muted:#9aa0a6;
  --accent:#a8ff60;         /* terminal green for subtle accents */

  /* Fonts */
  --retro:"VT323", monospace; /* retro for logo/titles only */
  --code: ui-monospace, SFMono-Regular, Menlo, Monaco,
          Consolas, "Liberation Mono", "DejaVu Sans Mono",
          "Courier New", monospace;          /* readable coding font */
  --text: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu,
          Cantarell, "Noto Sans", "Helvetica Neue", Arial, sans-serif; /* general UI */

  --wrap: 820px;
  --line: 1.9;

  /* Logo sizing helpers (approximate belt width to logo length) */
  --logo-size: 54px;  /* matches .logo font-size */
  --logo-ch: 7;       /* number of characters in "mr.jits" */
}

/* base */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: var(--text);           /* readable UI for chrome/nav */
  font-size: 20px;
  line-height: var(--line);
  letter-spacing: .2px;
}

/* layout */
.wrap{ width:min(95%, var(--wrap)); margin:0 auto }
.header{ padding:28px 0 16px }
.footer{ color:var(--muted); padding:48px 0 24px; font-size:18px }

/* logo */
.logo{
  font-family: var(--retro);
  font-size: var(--logo-size);
  margin:0;
  text-transform: none;
  display:inline-block;
}
.logo span{ opacity:.95 }

/* belt underline (white → blue → purple → brown → black → red) */
/* Hard color divisions + width approximated to logo length */
.belt-underline{
  height:8px;
  width: calc(var(--logo-ch) * 0.62 * var(--logo-size)); /* tune 0.62 if needed */
  margin:8px 0 10px;
  border-radius:3px;
  display:block;
  background: linear-gradient(90deg,
    #ffffff 0%,      #ffffff 16.6667%,
    #2a6cf7 16.6667%,#2a6cf7 33.3333%,
    #7e3fbf 33.3333%,#7e3fbf 50%,
    #6a4b36 50%,     #6a4b36 66.6667%,
    #000000 66.6667%,#000000 83.3333%,
    #c01717 83.3333%,#c01717 100%
  );
  box-shadow: 0 0 12px rgba(192,23,23,.08);
}

/* nav */
.nav{ display:flex; gap:18px; margin-top:6px }
.nav-link{
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px dashed transparent;
}
.nav-link:hover{ color:var(--ink); border-bottom-color:var(--ink) }
.nav-link.active{ color:var(--ink) }

/* intro */
.prompt{ color:var(--ink); margin:22px 0 6px }
.caret{ color:var(--accent); margin-right:8px }

/* posts */
.section-title{
  font-family: var(--retro);
  margin:26px 0 8px;
  font-size:32px
}
.post-list{ list-style:none; padding:0; margin:12px 0 40px }
.post-item{ margin:12px 0 6px }
.post-link{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.post-link:hover{ border-bottom-color:var(--ink) }
.meta{
  display:block;
  color:var(--muted);
  font-size:18px;
  margin-top:2px;
}

/* article page */
.article{ padding-top:12px }
.article h1{
  font-family: var(--retro);
  font-size:42px; margin:0 0 6px
}
.article .meta{ margin-bottom:22px }

/* Use readable coding font for body text in articles */
.article p,
.article li{
  color:var(--ink);
  font-family: var(--code);
}

/* Links */
.article a{ color:#89b4ff; text-decoration:none; border-bottom:1px dotted #89b4ff }
.article a:hover{ opacity:.9 }

/* Code blocks use the coding font (not VT323) */
.article pre, .article code{
  font-family: var(--code);
  background:#0f1113;
  padding:.1em .25em;
  border-radius:4px;
}
.article pre{
  padding:10px 12px; overflow:auto; border:1px solid #16181a;
}

/* small screens */
@media (max-width:520px){
  :root{
    --logo-size: 44px; /* scales logo and the belt width together */
  }
  .belt-underline{ height:5px }
  .section-title{ font-size:28px }
}