/* ============================================================
   cyberdeck — retro-cyberpunk Ghost theme for nathanlindberg//OS
   ============================================================ */

@font-face {
  font-family: "DOS";
  src: url("../fonts/PerfectDOSVGA437Win.woff2") format("woff2");
  font-display: swap;
}
/* Readable monospace for long-form prose — paired with DOS for display/UI. */
@font-face { font-family: "PlexMono"; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "PlexMono"; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2"); }
@font-face { font-family: "PlexMono"; font-weight: 600; font-display: swap;
  src: url("../fonts/ibm-plex-mono-600.woff2") format("woff2"); }

:root {
  --font-display: "DOS", monospace;          /* headings, brand, UI chrome */
  --font-body: "PlexMono", ui-monospace, monospace;  /* readable prose */
}

:root {
  --bg:       #050807;
  --bg-grid:  #0c1512;
  --panel:    #0a1311;
  --ink:      #c8ffe0;
  --muted:    #6fae9c;
  --neon:     #19f7c2;
  --neon-dim: #0e8f73;
  --magenta:  #ff2a6d;
  --amber:    #ffb000;
  --violet:   #b967ff;
  --line:     #154b40;
  --glow:     0 0 4px var(--neon), 0 0 11px rgba(25,247,194,.45);
  --maxw:     820px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(25,247,194,.10), transparent 60%),
    linear-gradient(var(--bg-grid) 1px, transparent 1px) 0 0 / 100% 38px,
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px) 0 0 / 38px 100%,
    var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  min-height: 100vh;
}
/* display font for brand, headings, nav and UI chrome */
.brand-name, .site-nav, .intro-art, .post-card-title, .post-title,
.gh-content h2, .gh-content h3, .post-nav a, .pagination,
.section-label, .toc-title, .readnext-title { font-family: var(--font-display); }
a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--neon); text-shadow: var(--glow); }

/* CRT scanlines */
#crt-overlay {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0, rgba(0,0,0,.22) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: multiply;
}

/* ---- header -------------------------------------------------------------- */
.site-head { border-bottom: 1px solid var(--neon-dim); padding: 22px 20px 14px; background: linear-gradient(180deg, rgba(10,19,17,.85), transparent); }
.site-head-inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-brand { display: flex; align-items: center; gap: 11px; color: var(--neon); }
.brand-logo { display: block; filter: drop-shadow(0 0 4px rgba(25,247,194,.6)); }
.brand-glyph { font-size: 16px; }
.brand-name { font-size: 26px; letter-spacing: 2px; text-shadow: var(--glow); }
.site-nav { display: flex; align-items: center; gap: 16px; }
.site-nav .nav { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; }
.site-nav a { color: var(--ink); font-size: 15px; }
.site-nav a:hover { color: var(--neon); }
.nav-back { color: var(--magenta) !important; }
.site-head-tagline { max-width: var(--maxw); margin: 8px auto 0; color: var(--muted); font-size: 14px; }

/* ---- main ---------------------------------------------------------------- */
.site-main { max-width: var(--maxw); margin: 0 auto; padding: 28px 20px 60px; }

.intro-banner { border: 1px solid var(--line); background: rgba(4,16,13,.6); padding: 16px 18px; margin-bottom: 28px; }
.intro-art { margin: 0; color: var(--neon); text-shadow: var(--glow); font-size: 18px; }
.intro-line { margin: 6px 0 0; color: var(--muted); font-size: 14px; }

/* ---- post feed ----------------------------------------------------------- */
.post-feed { display: grid; gap: 18px; }
.post-card { border: 1px solid var(--line); background: var(--panel); transition: border-color .15s, box-shadow .15s; }
.post-card:hover { border-color: var(--neon); box-shadow: inset 0 0 18px rgba(25,247,194,.12), 0 0 18px rgba(25,247,194,.15); }
.post-card-link { display: block; color: inherit; }
.post-card-image { height: 180px; background-size: cover; background-position: center; border-bottom: 1px solid var(--line); filter: saturate(1.1) contrast(1.05); }
.post-card-body { padding: 16px 18px; }
.post-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.post-card-tag { color: var(--violet); font-size: 13px; }
.post-card-date { color: var(--amber); font-size: 13px; margin-left: auto; }
.post-card-title { margin: 0 0 8px; font-size: 22px; color: var(--neon); }
.post-card-excerpt { margin: 0 0 10px; color: var(--ink); font-size: 15px; }
.post-card-more { color: var(--magenta); font-size: 14px; }

/* ---- single post --------------------------------------------------------- */
.post { border: 1px solid var(--line); background: var(--panel); padding: 28px 26px; }
.post-head { border-bottom: 1px dashed var(--neon-dim); padding-bottom: 16px; margin-bottom: 20px; }
.post-meta { display: flex; gap: 14px; align-items: center; color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.post-tag { color: var(--violet); }
.post-readtime { color: var(--amber); }
.post-title { margin: 0; font-size: 34px; line-height: 1.2; color: var(--neon); text-shadow: var(--glow); }
.post-subtitle { color: var(--muted); margin: 10px 0 0; font-size: 16px; }
.post-image { margin: 0 0 22px; }
.post-image img { width: 100%; height: auto; border: 1px solid var(--line); }

/* content (Koenig) */
.gh-content { font-size: 17px; }
.gh-content > * { margin: 0 0 1.2em; }
.gh-content h2, .gh-content h3 { color: var(--neon); text-shadow: var(--glow); margin-top: 1.6em; }
.gh-content a { text-decoration: underline; }
.gh-content blockquote { border-left: 3px solid var(--magenta); margin-left: 0; padding-left: 16px; color: var(--muted); }
.gh-content code { background: #04100d; color: var(--neon); padding: 2px 6px; border: 1px solid var(--line); }
.gh-content pre { background: #02100c; color: var(--neon); padding: 14px 16px; border: 1px solid var(--neon-dim); overflow: auto; }
.gh-content pre code { border: 0; padding: 0; }
.gh-content img { max-width: 100%; height: auto; border: 1px solid var(--line); }
.gh-content hr { border: 0; border-top: 1px dashed var(--neon-dim); }
.kg-card { margin: 1.4em 0; }

/* Koenig wide / full-bleed image cards (required by Ghost) */
.gh-content .kg-width-wide  { position: relative; width: 75vw; min-width: 100%; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 1100px; left: 50%; transform: translateX(-50%); }
.gh-content .kg-width-full  { position: relative; width: 100vw; left: 50%; transform: translateX(-50%); max-width: none; }
.gh-content .kg-width-wide img,
.gh-content .kg-width-full img { width: 100%; }
.kg-width-full.kg-card-hascaption,
.kg-width-wide.kg-card-hascaption { margin-bottom: 1.6em; }
figcaption { text-align: center; color: var(--muted); font-size: 13px; margin-top: 6px; }

.post-foot { margin-top: 26px; padding-top: 16px; border-top: 1px dashed var(--neon-dim); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.post-tags a { color: var(--violet); }
.byline-label { color: var(--muted); } .byline-name { color: var(--neon); }

/* prev/next */
.post-nav { max-width: var(--maxw); margin: 18px auto 0; display: flex; justify-content: space-between; gap: 14px; }
.post-nav a { border: 1px solid var(--line); padding: 10px 14px; color: var(--ink); font-size: 14px; }
.post-nav a:hover { border-color: var(--neon); color: var(--neon); }

/* ---- pagination ---------------------------------------------------------- */
.pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 30px; color: var(--muted); }
.pagination a { border: 1px solid var(--neon-dim); padding: 8px 14px; color: var(--neon); }
.pagination a:hover { box-shadow: var(--glow); }

/* ---- footer -------------------------------------------------------------- */
.site-foot { border-top: 1px solid var(--neon-dim); padding: 18px 20px; margin-top: 40px; }
.site-foot-inner { max-width: var(--maxw); margin: 0 auto; display: flex; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.foot-sep { color: var(--neon-dim); }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .brand-name { font-size: 22px; }
  .post-title { font-size: 26px; }
  .post { padding: 20px 16px; }
  .post-nav { flex-direction: column; }
}

/* ============================================================
   v0.2 enhancements — functionality + graphics
   ============================================================ */

/* ---- reading-progress bar (top of viewport) ----------------------------- */
#read-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--neon), var(--magenta));
  box-shadow: 0 0 10px rgba(25,247,194,.8); z-index: 9600;
  transition: width .08s linear;
}

/* ---- glitch brand ------------------------------------------------------- */
.site-brand { position: relative; }
.brand-name { position: relative; display: inline-block; }
.brand-name::before, .brand-name::after {
  content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%;
  clip-path: inset(0 0 0 0); opacity: .85; pointer-events: none;
}
.brand-name::before { color: var(--magenta); z-index: -1; }
.brand-name::after  { color: #00c8ff; z-index: -1; }
.site-brand:hover .brand-name::before { animation: glitch-x .42s steps(2) infinite; }
.site-brand:hover .brand-name::after  { animation: glitch-x .31s steps(2) reverse infinite; }
@keyframes glitch-x {
  0% { transform: translate(0,0); clip-path: inset(0 0 70% 0); }
  25% { transform: translate(-2px,1px); clip-path: inset(40% 0 20% 0); }
  50% { transform: translate(2px,-1px); clip-path: inset(20% 0 50% 0); }
  75% { transform: translate(-1px,0); clip-path: inset(60% 0 8% 0); }
  100% { transform: translate(1px,1px); clip-path: inset(10% 0 60% 0); }
}

/* ---- staggered page-load reveal ----------------------------------------- */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); }

/* ---- nav search button -------------------------------------------------- */
.nav-search {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: transparent; border: 1px solid var(--neon-dim); color: var(--neon);
  font-family: var(--font-display); font-size: 14px; padding: 4px 10px;
}
.nav-search:hover { border-color: var(--neon); box-shadow: var(--glow); }
.nav-search .k { color: var(--muted); font-size: 11px; border: 1px solid var(--line); padding: 0 4px; }

/* ---- table of contents (long posts) ------------------------------------- */
.toc { border: 1px solid var(--line); background: #04100d; padding: 14px 16px; margin: 0 0 24px; }
.toc-title { color: var(--amber); font-size: 14px; letter-spacing: 1px; margin: 0 0 8px; }
.toc ol { margin: 0; padding-left: 18px; }
.toc li { margin: 3px 0; }
.toc a { color: var(--ink); font-size: 14px; }
.toc a:hover { color: var(--neon); }
.toc .lv3 { margin-left: 14px; opacity: .85; }

/* ---- read-next related posts -------------------------------------------- */
.readnext { max-width: var(--maxw); margin: 28px auto 0; }
.readnext-title { color: var(--amber); font-size: 15px; letter-spacing: 1px; margin: 0 0 12px; }
.readnext-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px){ .readnext-grid { grid-template-columns: 1fr; } }

/* ---- subscribe CTA ------------------------------------------------------ */
.subscribe-cta {
  border: 1px solid var(--neon-dim); background: linear-gradient(180deg, rgba(25,247,194,.06), transparent);
  padding: 22px; margin: 28px auto 0; max-width: var(--maxw); text-align: center;
}
.subscribe-cta h3 { color: var(--neon); margin: 0 0 6px; text-shadow: var(--glow); font-family: var(--font-display); }
.subscribe-cta p { color: var(--muted); margin: 0 0 14px; font-size: 14px; }
.subscribe-cta button {
  font-family: var(--font-display); font-size: 15px; letter-spacing: 1px; cursor: pointer;
  color: #04140f; background: var(--neon); border: 0; padding: 10px 20px; box-shadow: 0 0 14px rgba(25,247,194,.5);
}
.subscribe-cta button:hover { background: #5cffd8; }

/* ---- native comments ---------------------------------------------------- */
.post-comments { max-width: var(--maxw); margin: 30px auto 0; border-top: 1px dashed var(--neon-dim); padding-top: 18px; }
.section-label { color: var(--amber); font-size: 14px; letter-spacing: 1px; margin: 0 0 12px; }

/* ---- code blocks: terminal-window chrome -------------------------------- */
.gh-content pre[class*="language-"], .gh-content pre {
  position: relative; border: 1px solid var(--neon-dim); background: #02100c;
  padding: 34px 16px 14px; border-radius: 4px;
}
.gh-content pre::before {   /* title-bar dots */
  content: "● ● ●"; position: absolute; top: 0; left: 0; right: 0; height: 22px;
  line-height: 22px; padding: 0 10px; font-size: 10px; letter-spacing: 3px;
  color: var(--neon-dim); background: #061c16; border-bottom: 1px solid var(--line);
}
.copy-code {
  position: absolute; top: 0; right: 0; height: 22px; z-index: 2;
  font-family: var(--font-display); font-size: 11px; color: var(--neon);
  background: transparent; border: 0; border-left: 1px solid var(--line); padding: 0 10px; cursor: pointer;
}
.copy-code:hover { background: rgba(25,247,194,.12); }
.copy-code.done { color: var(--amber); }