/* =========================================================
   BLOGV1P — retro terminal theme
   Palette (name these, don't guess them later):
   --bg          #0a0f0d   base page background (near-black, green cast)
   --bg-panel    #101815   code block / callout background
   --bg-raised   #0d1a17   sidebar hover / card background
   --line        #1c2a25   hairline borders
   --fg          #eaf6ef   headings / high-emphasis text
   --fg-body     #c4d1cb   body copy (neutral warm grey, NOT green)
   --fg-dim      #5f7d70   meta text, captions, comments
   --code-fg     #7fdcae   code block base text (green lives HERE now)
   --accent      #37e08c   links, active nav, cursor
   --accent-2    #7ecbe0   secondary accent (functions, hover)
   --tag         #ff8fc7   code: tags / keywords
   --attr        #f2b866   code: attribute names / numbers / inline code
   --str         #9ee6a8   code: strings / attribute values
   --page-pad    40px      distance from the left edge of the viewport
   ========================================================= */

:root{
  --bg:#0a0f0d;
  --bg-panel:#101815;
  --bg-raised:#0d1a17;
  --line:#1c2a25;
  --fg:#eaf6ef;
  --fg-body:#c4d1cb;
  --fg-dim:#5f7d70;
  --code-fg:#7fdcae;
  --accent:#37e08c;
  --accent-2:#7ecbe0;
  --tag:#ff8fc7;
  --attr:#f2b866;
  --str:#9ee6a8;
  --page-pad:40px;
  --sans: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg-body);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

/* faint scanline / vignette wash, signature texture of the theme */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse at 50% -10%, rgba(55,224,140,0.06), transparent 60%);
}

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

::selection{background:var(--accent); color:#04120a;}

/* ---------- layout shell ---------- */
.site-header{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:none;
  margin:0;
  padding:28px var(--page-pad) 0;
}
.brand{
  font-weight:700;
  color:var(--fg);
  font-family:var(--mono);
  font-size:15px;
  letter-spacing:0.02em;
}
.brand .cursor{
  display:inline-block;
  width:8px; height:1em;
  background:var(--accent);
  margin-left:2px;
  vertical-align:-2px;
  animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0;}}

/* Article grid. The first column is minmax(0,1fr), so the text expands to fill
   whatever width is left after the 260px sidebar instead of stopping at 760px.
   If the lines ever feel too long to read comfortably on a wide monitor, the
   only knob you need is here: swap 1fr for a cap, e.g. minmax(0,1100px). */
.wrap{
  position:relative;
  z-index:1;
  max-width:none;
  margin:0;
  padding:56px var(--page-pad) 120px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px;
  gap:72px;
}

/* Grid items default to min-width:auto, which lets one very long unbreakable
   token (e.g. a 125-bit sequence inside a code block) stretch the whole
   column. Pin both tracks to 0 so the code scrolls instead of the page. */
main, .toc{min-width:0;}

/* ---------- article header ---------- */
.post-title{
  color:var(--fg);
  font-size:38px;
  line-height:1.2;
  letter-spacing:-0.015em;
  margin:0 0 10px;
  font-weight:700;
}
.post-meta{
  color:var(--fg-dim);
  font-size:13px;
  margin-bottom:28px;
}
.post-meta .dot{margin:0 8px;}

.badge-row{
  display:flex; align-items:center; gap:14px;
  font-size:13px; color:var(--fg-dim);
  margin-bottom:8px;
}
.badge-row .lang-dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--accent); display:inline-block; margin-right:6px;
}

.author-block{
  display:flex; align-items:center; gap:10px;
  margin:34px 0 40px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.author-block .eyebrow{
  display:block; font-size:11px; letter-spacing:0.12em;
  color:var(--fg-dim); text-transform:uppercase; margin-bottom:4px;
}
.author-block .name{color:var(--accent); font-weight:600; font-size:14px;}

/* ---------- article body ---------- */
article h2{
  color:var(--fg);
  font-size:26px;
  font-weight:700;
  letter-spacing:-0.01em;
  margin:48px 0 16px;
  padding-top:8px;
  scroll-margin-top:24px;
}
article h3{
  color:var(--fg);
  font-size:19px;
  font-weight:600;
  margin:32px 0 12px;
  scroll-margin-top:24px;
}
article p{margin:0 0 18px; color:var(--fg-body);}
article ul, article ol{margin:0 0 18px; padding-left:22px; color:var(--fg-body);}
article li{margin-bottom:6px;}
article strong{color:var(--fg);}
article em{color:var(--accent-2); font-style:italic;}

article code{
  background:var(--bg-panel);
  border:1px solid var(--line);
  color:var(--attr);
  font-family:var(--mono);
  padding:2px 6px;
  border-radius:4px;
  font-size:0.84em;
}

figure{margin:28px 0;}
figure img{
  max-width:min(100%, 900px);
  height:auto;
  display:block;
  border-radius:8px;
  border:1px solid var(--line);
}
figcaption{
  text-align:left; color:var(--fg-dim); font-size:12.5px; margin-top:10px;
  max-width:900px;
}

blockquote.note{
  position:relative;
  margin:26px 0;
  padding:16px 18px 16px 44px;
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:8px;
  color:var(--fg-body);
  font-size:14.5px;
}
blockquote.note::before{
  content:"●";
  position:absolute; left:16px; top:16px;
  color:var(--accent); font-size:12px;
}

pre{
  position:relative;
  background:var(--bg-panel) !important;
  border:1px solid var(--line);
  border-radius:10px;
  padding:20px 22px;
  margin:26px 0;
  max-height:420px;
  overflow-x:auto;
  overflow-y:auto;
  font-family:var(--mono);
  font-size:13.5px;
  line-height:1.65;

  /* Firefox thin scrollbar in theme colors */
  scrollbar-width:thin;
  scrollbar-color:var(--line) var(--bg-panel);
}
pre code{
  background:none !important;
  border:none !important;
  padding:0 !important;
  color:var(--code-fg);
  font-family:var(--mono);
}
pre::before{
  content:attr(data-lang);
  position:absolute; top:10px; right:16px;
  font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--fg-dim);
  background:var(--bg-panel);
  padding-left:8px;
}

/* Chromium/Safari scrollbars, styled to match the terminal theme */
pre::-webkit-scrollbar{
  width:8px;
  height:8px;
}
pre::-webkit-scrollbar-track{
  background:var(--bg-panel);
}
pre::-webkit-scrollbar-thumb{
  background-color:var(--line);
  border-radius:8px;
  border:2px solid var(--bg-panel);
}
pre::-webkit-scrollbar-thumb:hover{
  background-color:var(--fg-dim);
}

@media (max-width: 880px){
  pre{ max-height:340px; }
}

/* Prism token overrides -> match the reference palette */
.token.tag, .token.keyword, .token.selector{color:var(--tag);}
.token.attr-name, .token.number, .token.boolean, .token.constant{color:var(--attr);}
.token.string, .token.attr-value, .token.char{color:var(--str);}
.token.comment{color:var(--fg-dim); font-style:italic;}
.token.function, .token.class-name{color:var(--accent-2);}
.token.punctuation{color:#c9d1d9;}
.token.operator{color:#c9d1d9;}

/* ---------- sidebar TOC ---------- */
.toc{
  position:sticky; top:32px;
  align-self:start;
  font-size:13.5px;
}
.toc-title{
  color:var(--fg-dim);
  font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  margin-bottom:14px;
}
.toc ul{list-style:none; margin:0; padding:0;}
.toc li{margin-bottom:9px;}
.toc a{color:var(--fg-body); display:block;}
.toc a:hover{color:var(--accent); text-decoration:none;}
.toc ul ul{margin-top:9px; padding-left:16px; border-left:1px solid var(--line);}

.back-to-top{
  position:fixed; bottom:28px; right:28px;
  width:38px; height:38px; border-radius:50%;
  background:var(--bg-panel); border:1px solid var(--line);
  color:var(--accent); display:flex; align-items:center; justify-content:center;
  text-decoration:none; font-size:16px;
  opacity:0.8;
}
.back-to-top:hover{opacity:1; border-color:var(--accent);}

footer.site-footer{
  position:relative; z-index:1;
  max-width:none; margin:0; padding:0 var(--page-pad) 48px;
  color:var(--fg-dim); font-size:12.5px;
  border-top:1px solid var(--line); padding-top:20px;
}

/* ---------- responsive ---------- */
@media (max-width: 880px){
  :root{ --page-pad:20px; }
  .wrap{grid-template-columns:minmax(0,1fr); gap:32px; padding:40px var(--page-pad) 100px;}
  .toc{position:static; order:-1; border:1px solid var(--line); border-radius:8px; padding:16px; background:var(--bg-panel);}
  .site-header{padding:22px var(--page-pad) 0;}
  .post-title{font-size:26px;}
}

@media (prefers-reduced-motion: reduce){
  .brand .cursor{animation:none;}
  html{scroll-behavior:auto;}
}