/* layout: fixed terminal sidebar (17rem) | fluid content column capped at 78ch */
:root {
  --bg: #040904;      /* screen */
  --panel: #071207;   /* sidebar */
  --line: #164a22;    /* borders, rules */
  --fg: #39ff6a;      /* phosphor: headings, links, accents */
  --text: #b4f2c4;    /* body copy: softer, easier on the eyes */
  --dim: #4cc46c;     /* secondary text */
  --hi: #ffb020;      /* amber: bold, code chips */
  --glow: rgba(57, 255, 106, .18);
  --mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  color: var(--text);
  font: 16px/1.75 var(--mono);
}
/* CRT scanlines */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9;
  background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, .07) 2px 3px);
}

a { color: var(--fg); text-underline-offset: 3px; }
a:hover, a:focus-visible { background: var(--fg); color: var(--bg); text-shadow: none; outline: none; }
::selection { background: var(--fg); color: var(--bg); }
p { margin: 0; }
.dim { color: var(--dim); }

/* glow only on display text */
h1, h2, h3, .brand, .ps1, .logo img { text-shadow: 0 0 4px var(--glow); }
#content h1, #content h2, #content h3, .brand, .ps1 { color: var(--fg); }

/* ---------- sidebar ---------- */
.side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1.75rem;
  padding: 2.25rem 1.5rem;
  background: var(--panel);
  border-right: 1px solid var(--line);
}
.logo { align-self: flex-start; border-radius: 50%; }
.logo:hover, .logo:focus-visible { background: none; }
.logo img { display: block; width: 120px; height: 120px; border-radius: 50%; box-shadow: 0 0 22px var(--glow); }
.brand { font-size: 1.25rem; font-weight: 700; }
.brand b { color: var(--dim); }
.id .dim { font-size: .8rem; }
.lbl { display: block; color: var(--dim); font-size: .75rem; letter-spacing: .08em; margin-bottom: .35rem; }
nav, .social { display: flex; flex-direction: column; gap: .15rem; }
nav a, .social a { text-decoration: none; padding: .05rem .4rem; margin-left: -.4rem; }
nav a::before { content: "  "; white-space: pre; }
nav a.on::before { content: "> "; }
nav a.on { color: var(--hi); }
.social a::before { content: "↗ "; color: var(--dim); }
.foot { margin-top: auto; font-size: .7rem; color: var(--dim); letter-spacing: .06em; }

/* ---------- content ---------- */
main {
  min-width: 0;
  padding-block: 2.25rem 4rem;
  padding-left: max(16px, 4vw, env(safe-area-inset-left, 0px));
  padding-right: max(16px, 4vw, env(safe-area-inset-right, 0px));
}
.prompt { color: var(--dim); margin-bottom: 1.75rem; word-break: break-all; }
.ps1 { color: var(--fg); font-weight: 700; }
#cmd { color: var(--fg); }
.cur { display: inline-block; width: .6em; height: 1.1em; vertical-align: text-bottom; margin-left: .2em; background: var(--fg); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

#content { max-width: 78ch; display: flex; flex-direction: column; gap: 1rem; outline: none; }
#content h1, #content h2, #content h3, #content h4 { margin: 1rem 0 0; line-height: 1.3; text-wrap: balance; }
#content h1 { font-size: 1.5rem; margin-top: 0; }
#content h1::before { content: "# "; color: var(--dim); }
#content h2 { font-size: 1.15rem; }
#content h2::before { content: "## "; color: var(--dim); }
#content h3 { font-size: 1rem; color: var(--hi); }
strong { color: var(--hi); }
em { color: var(--dim); }
hr { width: 100%; border: 0; border-top: 1px dashed var(--line); margin: .5rem 0; }
ul, ol { margin: 0; padding-left: 2ch; }
ul { list-style: none; }
ul > li::before { content: "> "; color: var(--dim); margin-left: -2ch; }
li + li { margin-top: .2rem; }
blockquote { margin: 0; padding: .25rem 0 .25rem 1.5ch; border-left: 2px solid var(--dim); color: var(--dim); }
code { color: var(--hi); border: 1px solid rgba(255, 176, 32, .45); padding: 0 .3ch; text-shadow: none; }
pre { margin: 0; padding: 1rem 1.25rem; overflow-x: auto; border: 1px solid var(--line); background: #020602; }
pre code { color: var(--text); border: 0; padding: 0; }
img { max-width: 100%; border: 1px solid var(--line); }
.tbl { overflow-x: auto; }
table { border-collapse: collapse; font-size: .9rem; }
th, td { border: 1px solid var(--line); padding: .3rem .8rem; text-align: left; vertical-align: top; }
th { color: var(--hi); }

/* blog listing (ls -l style) */
.posts { padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.posts li::before { content: none; }
.posts .ls { color: var(--dim); font-size: .85rem; white-space: pre; overflow-x: auto; display: block; }
.posts a { font-weight: 700; }
.posts p { color: var(--dim); }
.tags { font-size: .8rem; color: var(--dim); }
.err { color: #ff5f56; }

/* ---------- phone ---------- */
@media (max-width: 760px) {
  body { grid-template-columns: 1fr; }
  .side {
    position: static; height: auto; overflow: visible;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem;
    padding-block: 1.25rem;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .logo img { width: 64px; height: 64px; }
  nav, .social { flex-direction: row; flex-wrap: wrap; gap: .25rem 1rem; flex-basis: 100%; }
  .lbl { flex-basis: 100%; margin: 0; }
  .foot { display: none; }
  main { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
}

@media (prefers-reduced-motion: reduce) { .cur { animation: none; } }