/* ==========================================================================
   takibyte — shared stylesheet
   Used by: home, projects, posts (archive), post, about
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  --font-sans:'Space Grotesk', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  /* neutrals */
  --bg:#0e1116;
  --surface:#161a21;
  --line:#262c36;
  --line-hover:#3a4250;
  --ink:#e9edf2;
  --ink-soft:#c7cdd6; 
  --muted:#7c8593;
  --faint:#4a5261;

  /* identity — decorative variety, no fixed meaning */
  --accent-1:#5ee0c0;   /* was cyan — also doubles as brand/interactive */
  --accent-2:#9c8cf0;   /* was violet */
  --accent-3:#f0b860;   /* was amber */
  --accent-4:#e0685e;   /* was red */
  --accent-5:#6ea8fe;   /* new */
  --accent-6:#f0708a;   /* new */

  /* status — meaning is fixed across every theme */
  --success:#5ee0c0;
  --caution:#f0b860;
  --danger:#e0685e;
}

[data-theme="dark"]{
  --bg:#0e1116;
  --surface:#161a21;
  --line:#262c36;
  --line-hover:#3a4250;
  --ink:#e9edf2;
  --ink-soft:#c7cdd6; 
  --muted:#7c8593;
  --faint:#4a5261;

  --accent-1:#5ee0c0;   /* was cyan — also doubles as brand/interactive */
  --accent-2:#9c8cf0;   /* was violet */
  --accent-3:#f0b860;   /* was amber */
  --accent-4:#e0685e;   /* was red */
  --accent-5:#6ea8fe;   /* new */
  --accent-6:#f0708a;   /* new */

  --success:#5ee0c0;
  --caution:#f0b860;
  --danger:#e0685e;
}


[data-theme="light"]{
  --bg:#f7f8fa;
  --surface:#ffffff;
  --line:#e2e5ea;
  --line-hover:#c7cbd3;
  --ink:#1a1d23;
  --ink-soft:#3f4652;
  --muted:#6b7280;
  --faint:#9ca3af;

  --accent-1:#0d9488;
  --accent-2:#7c3aed;
  --accent-3:#b45309;
  --accent-4:#dc2626;
  --accent-5:#2563eb;
  --accent-6:#db2777;

  --success:#0d9488;
  --caution:#b45309;
  --danger:#dc2626;
}

[data-theme="tokyonight"]{
  --bg:#1a1b26;
  --surface:#24283b;
  --line:#3b4261;
  --line-hover:#545c7e;
  --ink:#c0caf5;
  --ink-soft:#a9b1d6;
  --muted:#565f89;
  --faint:#414868;

  --accent-1:#7dcfff;
  --accent-2:#bb9af7;
  --accent-3:#ff9e64;
  --accent-4:#f7768e;
  --accent-5:#7aa2f7;
  --accent-6:#73daca;

  --success:#73daca;
  --caution:#ff9e64;
  --danger:#f7768e;
}

[data-theme="nord"]{
  --bg:#2e3440;
  --surface:#3b4252;
  --line:#4c566a;
  --line-hover:#5e6779;
  --ink:#eceff4;
  --ink-soft:#d8dee9;
  --muted:#8b95a7;
  --faint:#4c566a;

  --accent-1:#88c0d0;
  --accent-2:#b48ead;
  --accent-3:#ebcb8b;
  --accent-4:#bf616a;
  --accent-5:#81a1c1;
  --accent-6:#d08770;

  --success:#88c0d0;
  --caution:#ebcb8b;
  --danger:#bf616a;
}

[data-theme="cyberpunk"]{
  --bg:#0a0a0d;
  --surface:#151519;
  --line:#2b2b30;
  --line-hover:#454550;
  --ink:#f2f2ea;
  --ink-soft:#c8c8c0;
  --muted:#8b8b90;
  --faint:#525258;

  --accent-1:#00f0ff;   /* cyan — menu-select highlight */
  --accent-2:#ff2a6d;   /* magenta — circuit-grid pink */
  --accent-3:#fcee0a;   /* CP2077 logo yellow — brand/interactive */   
  --accent-4:#ff003c;   /* red — alert red from the boot screen */
  --accent-5:#0abdc6;   /* electric teal, secondary cool tone */
  --accent-6:#f906c4;   /* hot pink, secondary warm tone */

  --success:#00ff9f;    /* neon green — netrunner/hacking green, reads as "go" */
  --caution:#fcee0a;    /* reuses the brand yellow for warning */
  --danger:#ff003c;     /* alert red */
}

[data-theme="paper"]{
  --bg:#f4ede2;
  --surface:#faf5eb;
  --line:#ddd2bf;
  --line-hover:#c4b59c;
  --ink:#3a2f24;
  --ink-soft:#5c4f40;
  --muted:#8a7a68;
  --faint:#a89984;

  --accent-1:#8a5a3d;   /* warm sienna — brand/interactive, reads like ink not neon */
  --accent-2:#6b6098;   /* muted plum */
  --accent-3:#a8792f;   /* ochre/mustard */
  --accent-4:#a5473c;   /* brick red */
  --accent-5:#4f7a6b;   /* muted sage */
  --accent-6:#956a82;   /* dusty mauve */

  --success:#4f7a6b;
  --caution:#a8792f;
  --danger:#a5473c;
}

[data-theme="redteam"]{
  --bg:#120a0a;
  --surface:#1c1010;
  --line:#3a1f1f;
  --line-hover:#552e2e;
  --ink:#f2e4e4;
  --ink-soft:#d4b8b8;
  --muted:#8f6a6a;
  --faint:#4d3232;

  --accent-1:#ff4d4d;   /* brand red */
  --accent-2:#4d9fff;   /* cold blue contrast */
  --accent-3:#ff9d4d;   /* amber/orange */
  --accent-4:#ff1a1a;   /* alert red, deeper than brand */
  --accent-5:#e05252;   /* muted brick */
  --accent-6:#c93b6b;   /* magenta */

  --success:#4d9fff;    /* cool color reads as "safe/good" against the hot palette */
  --caution:#ff9d4d;
  --danger:#ff1a1a;
}

[data-theme="blueteam"]{
  --bg:#0a0f14;
  --surface:#10171f;
  --line:#1f2d3a;
  --line-hover:#2e4255;
  --ink:#e4edf2;
  --ink-soft:#b8ccd4;
  --muted:#6a8296;
  --faint:#32414d;

  --accent-1:#4dc4ff;
  --accent-2:#7d8aff;
  --accent-3:#4dffb8;
  --accent-4:#ff5f5f;
  --accent-5:#52a7e0;
  --accent-6:#5fc9c9;

  --success:#4dffb8;
  --caution:#ffcf4d;
  --danger:#ff5f5f;
}


/* [data-theme="old-dark"]{
  --bg:#0e1116;
  --surface:#161a21;
  --line:#262c36;
  --ink:#e9edf2;
  --muted:#7c8593;
  --cyan:#5ee0c0;
  --violet:#9c8cf0;
  --amber:#f0b860;
  --red:#e0685e;
} */

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0;}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none;}
.mono{font-family:var(--font-mono);}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   Shared shell used identically on every page.
   -------------------------------------------------------------------------- */

/* ---- header / nav / subscribe ---- */
header{
  max-width:1200px;margin:0 auto;
  padding:26px 32px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);
}
.logo{
  font-weight:700;font-size:20px;letter-spacing:-0.02em;
  display:flex;align-items:center;gap:8px;
}
.logo:hover{opacity:0.8;}
.logo::before{
  content:"";
  width:9px;height:9px;border-radius:50%;
  background:var(--accent-1);
  box-shadow:0 0 10px var(--accent-1);
}
nav{display:flex;gap:30px;font-size:14px;color:var(--muted);}
nav a:hover{color:var(--ink);}
nav a.active{color:var(--accent-1);}

.theme-select{
  font-family:var(--font-mono);
  font-size:12px;
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line);
  padding:7px 9px;
  border-radius:6px;
  cursor:pointer;
}
.theme-select:hover{border-color:var(--accent-1);}

.theme-select.mobile{
  width:100%;
  margin:16px 0 20px;
}

.subscribe{
  font-size:13px;font-family:var(--font-mono);
  border:1px solid var(--line);
  padding:8px 16px;border-radius:6px;
  color:var(--ink);
}
.subscribe:hover{border-color:var(--accent-1);color:var(--accent-1);}

/* ---- content containers ---- */
main{max-width:1200px;margin:0 auto;padding:48px 32px 90px;}

/* Narrower single-column wrapper, used by Post and About */
.wrap{max-width:760px;margin:0 auto;padding:0 32px;}

/* ---- footer ---- */
footer{
  max-width:1200px;margin:0 auto;padding:32px;
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;
  font-family:var(--font-mono);
  font-size:12.5px;color:var(--muted);
}

/* ---- mobile nav (hamburger + dropdown) ---- */
.menu-toggle{
  display:none;
  background:none;border:none;
  width:32px;height:32px;
  align-items:center;justify-content:center;
  cursor:pointer;
}
.menu-toggle span{
  display:block;width:18px;height:1.5px;
  background:var(--ink);
  position:relative;
  transition:background .15s;
}
.menu-toggle span::before,
.menu-toggle span::after{
  content:"";
  position:absolute;left:0;
  width:18px;height:1.5px;
  background:var(--ink);
  transition:transform .2s;
}
.menu-toggle span::before{top:-6px;}
.menu-toggle span::after{top:6px;}
.menu-toggle.open span{background:transparent;}
.menu-toggle.open span::before{transform:translateY(6px) rotate(45deg);}
.menu-toggle.open span::after{transform:translateY(-6px) rotate(-45deg);}

.mobile-nav{
  display:none;
  max-width:1200px;margin:0 auto;
  padding:0 32px;
  border-bottom:1px solid var(--line);
  overflow:hidden;
  max-height:0;
  transition:max-height .2s ease;
}
.mobile-nav.open{max-height:280px;}
.mobile-nav a{
  display:block;
  padding:16px 0;
  font-size:15px;color:var(--ink);
  border-top:1px solid var(--line);
}
.mobile-nav a:first-child{border-top:none;}
.mobile-nav a.active{color:var(--accent-1);}
.mobile-nav .subscribe{display:inline-block;margin:16px 0 20px;}


/* --------------------------------------------------------------------------
   4. SHARED COMPONENTS
   Patterns reused across three or more pages.
   -------------------------------------------------------------------------- */

/* Small uppercase mono label, e.g. "// systems", "// whoami" */
.kicker{
  font-family:var(--font-mono);
  font-size:12.5px;color:var(--accent-1);
  letter-spacing:0.05em;margin-bottom:12px;
  display:block;
}

/* Page intro block — kicker + h1 + optional dek. Used by Home, Projects, Posts. */
.page-intro{max-width:640px;margin-bottom:48px;}
.page-intro h1{font-size:34px;font-weight:600;line-height:1.25;letter-spacing:-0.01em;}
.page-intro p{font-size:15px;color:var(--muted);margin-top:12px;line-height:1.6;}

/* Filter chip row — used for content filtering on Home and Posts */
.tags-filter{display:flex;gap:8px;flex-wrap:wrap;}
.tag-filter{
  font-family:var(--font-mono);
  font-size:12px;padding:6px 14px;border-radius:20px;
  border:1px solid var(--line);color:var(--muted);
  cursor:pointer;
}
.tag-filter.active{border-color:var(--accent-1);color:var(--accent-1);background:color-mix(in srgb, var(--accent-1) 8%, transparent);}
.tag-filter:hover{color:var(--ink);}

/* Small "showing N of M" caption — used on Home and Posts */
.result-count{font-family:var(--font-mono);font-size:12.5px;color:var(--muted);padding-bottom:36px;display:block;}

/* Static pill tag — used at the bottom of an individual post */
.tag{
  font-family:var(--font-mono);
  font-size:12px;padding:6px 12px;border-radius:20px;
  border:1px solid var(--line);color:var(--muted);
}
.tag:hover{border-color:var(--accent-1);color:var(--accent-1);}

/* Status/category badge — small colored pill, used on Projects and Posts */
.badge{
  font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:0.05em;text-transform:uppercase;
  padding:4px 10px;border-radius:20px;
}

/* Content category color system — reused on Home cards, Posts rows,
   and the individual Post page's category label. One naming scheme
   everywhere: cat-homelab / cat-ctf / cat-tools / cat-notes */
.cat-homelab{color:var(--accent-1);}
.cat-ctf{color:var(--accent-2);}
.cat-tools{color:var(--accent-3);}
.cat-notes{color:var(--muted);}

/* Project type badge — distinguishes a "series" (post collection) from
   a "tool" (a shipped script/utility) on the Projects grid */
.badge.type-series{background:color-mix(in srgb, var(--accent-2) 12%, transparent);color:var(--accent-2);}
.badge.type-tool{background:color-mix(in srgb, var(--accent-3) 12%, transparent);color:var(--accent-3);}

/* "View all" link, e.g. Home → Posts */
.view-all{font-size:13px;color:var(--muted);}
.view-all:hover{color:var(--accent-1);}

/* Small bordered mono chip — reused for certifications and could extend
   to other short badge-style facts */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);
  font-size:13px;
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface);
  color:var(--ink);
}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-1);flex-shrink:0;}

/* Small reference-style ID, e.g. SIG-2026-0031, shown next to a post's date */
.post-id{font-family:var(--font-mono);font-size:12px;color:var(--muted);}


/* ==========================================================================
   5. PAGE-SPECIFIC BLOCKS
   ========================================================================== */

/* ---------- Home ---------------------------------------------------------- */
.toolbar{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:28px;flex-wrap:wrap;gap:16px;
}
.toolbar h2{font-size:20px;font-weight:600;letter-spacing:-0.01em;}

.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:20px;
  display:flex;flex-direction:column;
  transition:border-color .15s;
  width: 100%;
}
/* .thumb{height:200px} */
.card:hover{border-color:var(--line-hover)}
.card .thumb{
  aspect-ratio:16/10;
  border-radius:6px;
  margin-bottom:16px;
  position:relative;
  overflow:hidden;
}

.card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
}
/* 
.thumb.tc1{background:linear-gradient(135deg,#1c2b33,#0e1116);}
.thumb.tc1::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%, rgba(94,224,192,0.35), transparent 55%);}
.thumb.tc2{background:linear-gradient(135deg,#2a2440,#0e1116);}
.thumb.tc2::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 70%, rgba(156,140,240,0.35), transparent 55%);}
.thumb.tc3{background:linear-gradient(135deg,#332818,#0e1116);}
.thumb.tc3::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 60% 40%, rgba(240,184,96,0.32), transparent 55%);}
.thumb.tc4{background:linear-gradient(135deg,#1c2b33,#0e1116);}
.thumb.tc4::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 40% 60%, rgba(94,224,192,0.28), transparent 55%);}
.thumb.tc5{background:linear-gradient(135deg,#2a2440,#0e1116);}
.thumb.tc5::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 65% 65%, rgba(156,140,240,0.3), transparent 55%);}
.thumb.tc6{background:linear-gradient(135deg,#332818,#0e1116);}
.thumb.tc6::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 35% 35%, rgba(240,184,96,0.3), transparent 55%);} */

.card .cat{
  font-family:var(--font-mono);
  font-size:11.5px;letter-spacing:0.05em;
  margin-bottom:10px;
}


.card h3{font-size:17px;font-weight:600;line-height:1.35;margin-bottom:10px;}
.card p{
  font-size:13.5px;color:var(--muted);line-height:1.55;margin-bottom:16px;
  flex-grow:1; 
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3; /* cap at 3 lines, longer deks get truncated with ellipsis */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-meta{
  display:flex;justify-content:space-between;
  font-family:var(--font-mono);
  font-size:11.5px;color:var(--muted);
  border-top:1px solid var(--line);
  padding-top:12px;
  margin-top: auto; /* pins meta to the bottom regardless of dek length */
}

/* ---------- Projects -------------------------------------------------------- */
.status-filter{display:flex;gap:8px;margin-bottom:36px;}

.project-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}
.project-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:26px;
  display:flex;flex-direction:column;
  transition:border-color .15s;
  min-width:0;
}
.project-card:hover{border-color:var(--line-hover)}

.project-card .top-row{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:18px;
}
.badge-group{display:flex;gap:6px;}
.project-icon{
  width:44px;height:44px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.icon-1{background:color-mix(in srgb, var(--accent-1) 12%, transparent);color:var(--accent-1);}
.icon-2{background:color-mix(in srgb, var(--accent-2) 12%, transparent);color:var(--accent-2);}
.icon-3{background:color-mix(in srgb, var(--accent-3) 12%, transparent);color:var(--accent-3);}
.icon-4{background:color-mix(in srgb, var(--accent-4) 12%, transparent);color:var(--accent-4);}
.icon-5{background:color-mix(in srgb, var(--accent-5) 12%, transparent);color:var(--accent-5);}
.icon-6{background:color-mix(in srgb, var(--accent-6) 12%, transparent);color:var(--accent-6);}

/* .badge color variants, used for project status */
.status-active{background:color-mix(in srgb, var(--success) 12%, transparent);color:var(--success);}
.status-complete{background:color-mix(in srgb, var(--muted) 12%, transparent);color:var(--muted);}
.status-paused{background:color-mix(in srgb, var(--caution) 12%, transparent);color:var(--caution);}

.project-card h3{
  font-size:20px;font-weight:600;line-height:1.3;
  margin-bottom:10px;letter-spacing:-0.01em;
}
.project-card p{
  font-size:14px;color:var(--muted);line-height:1.6;
  margin-bottom:20px;flex-grow:1;
}

.project-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px;}
.project-tag{
  font-family:var(--font-mono);
  font-size:11px;padding:4px 10px;border-radius:4px;
  background:var(--bg);border:1px solid var(--line);color:var(--muted);
}

.project-footer{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:18px;border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:12.5px;color:var(--muted);
  gap:12px;
  min-width:0;
}
.project-footer .count{display:flex;align-items:center;gap:6px;}
.project-footer .repo-link{display:flex;align-items:center;gap:6px;min-width:0;}
.project-footer .view-link{color:var(--accent-1);flex-shrink:0;}
.project-footer .repo-link .repo-url{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.project-card:hover .view-link{text-decoration:underline;}

.progress-track{
  height:4px;border-radius:2px;background:var(--line);
  margin-bottom:20px;overflow:hidden;
}
.progress-track.in-hero{max-width:340px;margin-top:20px;margin-bottom:0;}
.progress-fill{height:100%;background:var(--success);border-radius:2px;}

/* Note directly under a progress bar needs less top space */
.section-note.no-margin{margin-bottom:0;margin-top:10px;}

/* ---------- Posts (archive index) ------------------------------------------ */
.controls{
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  margin-bottom:32px;
  padding-bottom:28px;
  border-bottom:1px solid var(--line);
}

.search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 14px;
  width: 14px;
  cursor: pointer;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  color: var(--muted); /* controls the color via currentColor */
}


.search{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--line);
  border-radius:6px;
  padding:9px 14px;
  background:var(--surface);
  flex:1;min-width:220px;
}
.search svg{flex-shrink:0;color:var(--muted);}

.search-input-wrap{
  flex:1;
  overflow:hidden; /* clips the oversized pre-scale input */
}

.search input{
  border:none;outline:none;background:none;
  font-family:var(--font-mono);
  font-size:16px;
  transform-origin: left center;
  transform: scale(0.8125);
  width:calc(100% / 0.8125); /* inflate to compensate for scale */
  color:var(--ink);
}
.search input::placeholder{color:var(--muted);}


.post-list{display:flex;flex-direction:column;}
.post-row{
  display:grid;
  grid-template-columns:90px 1fr auto;
  gap:24px;
  align-items:start;
  padding:26px 0;
  border-top:1px solid var(--line);
}
.post-row.first-visible{border-top:none;padding-top:0;}
.post-row:hover .post-title{color:var(--accent-1);}

.post-date{
  font-family:var(--font-mono);
  font-size:12px;color:var(--muted);
  padding-top:4px;
}
.post-date .year{display:block;color:var(--faint);margin-top:2px;}

.post-main .post-cat{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:0.06em;text-transform:uppercase;
  margin-bottom:8px;
}


.post-title{font-size:19px;font-weight:600;line-height:1.35;margin-bottom:8px;}
.post-excerpt{font-size:14px;color:var(--muted);line-height:1.6;max-width:58ch;}

.post-meta{
  text-align:right;
  font-family:var(--font-mono);
  font-size:12px;color:var(--muted);
  white-space:nowrap;
  padding-top:4px;
}
.post-meta .read-time{display:block;margin-bottom:4px;}

.load-more{text-align:center;padding:44px 0 0;}
.load-more button{
  font-family:var(--font-mono);font-size:13px;
  padding:11px 24px;border:1px solid var(--line);border-radius:6px;
  background:var(--surface);color:var(--ink);cursor:pointer;
}
.load-more button:hover{border-color:var(--accent-1);color:var(--accent-1);}

/* ---------- Post (individual) ---------------------------------------------- */
.post-header{padding:48px 0 0;}
.breadcrumb{
  font-family:var(--font-mono);
  font-size:12.5px;color:var(--muted);
  margin-bottom:24px;
}
.breadcrumb a:hover{color:var(--accent-1);}
.breadcrumb .sep{margin:0 8px;color:var(--line);}

.page-header-spacing{padding-top:48px;}

.post-cat{
  font-family:var(--font-mono);
  font-size:12.5px;letter-spacing:0.05em;
  margin-bottom:16px;
}
h1.headline{
  font-size:38px;font-weight:600;line-height:1.2;letter-spacing:-0.01em;
  margin-bottom:18px;
}
.dek{
  font-size:17px;line-height:1.6;color:var(--muted);
  max-width:60ch;margin-bottom:28px;
}
.meta-row{
  display:flex;align-items:center;gap:14px;
  padding-bottom:28px;
  border-bottom:1px solid var(--line);
}
.author-avatar{
  width:34px;height:34px;border-radius:50%;
  background-image:url('/assets/images/takibyte_bin.webp');background-size:cover;background-position:center;
  /* background:linear-gradient(135deg,var(--accent-2),#4a3d8a); */
}

.meta-text{flex:1;}

.meta-text .name{font-size:14px;font-weight:600;}
.meta-text .sub{
  font-family:var(--font-mono);
  font-size:12px;color:var(--muted);margin-top:2px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.meta-row .stats{
  margin-left:auto;
  display:flex;gap:16px;
  font-family:var(--font-mono);
  font-size:12.5px;color:var(--muted);
}

.series-badge{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--surface);border:1px solid var(--line);
  border-radius:8px;padding:12px 16px;
  margin:0 0 64px;
  font-family:var(--font-mono);font-size:13px;
  gap:8px 12px; /* row-gap column-gap — row-gap only matters once it wraps */
  flex-wrap:wrap;
}
.series-badge a{
  color:var(--accent-1);
  flex:1 1 auto;   /* allowed to grow AND shrink, and wrap its own text across lines */
  min-width:150px; /* stops it shrinking so far that single words start breaking oddly */
}
.series-badge a:hover{text-decoration:underline;}
.series-badge span{
  color:var(--muted);
  flex-shrink:0;     /* never shrinks */
  white-space:nowrap; /* "1 of 2" itself is never allowed to break across lines */
}

.post-media{
  aspect-ratio:16/9;border-radius:10px;
  margin:48px 0 24px;
  position:relative;overflow:hidden;
  width:100%;
  object-fit:cover;
  display:block;
  /* background:linear-gradient(135deg,#1c2b33,#0e1116); */
}
.post-media::after{
  content:"";position:absolute;inset:0;
  /* background:radial-gradient(circle at 70% 30%, rgba(94,224,192,0.28), transparent 55%); */
}

article.body{font-size:17px;line-height:1.75;color:var(--ink-soft);}
article.body p{margin-bottom:24px;}
article.body h2{
  font-size:24px;font-weight:600;color:var(--ink);
  margin:48px 0 18px;letter-spacing:-0.01em;
}
article.body h3{font-size:19px;font-weight:600;color:var(--ink);margin:36px 0 14px;}
article.body a{color:var(--accent-1);border-bottom:1px solid color-mix(in srgb, var(--accent-) 35%, transparent);}
article.body a:hover{border-color:var(--accent-1);}
article.body ul, article.body ol{margin:0 0 24px 22px;}
article.body li{margin-bottom:8px;}
article.body strong{color:var(--ink);}
article.body code{
  font-family:var(--font-mono);
  font-size:0.87em;
  background:var(--surface);
  border:1px solid var(--line);
  padding:2px 6px;border-radius:4px;
  color:var(--accent-3);
}

article.body img{
  max-width:100%;
  border-radius:4px;
  margin:8px 0 24px;
  display:block;
}

.code-block{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  margin:8px 0 32px;
  overflow:hidden;
}
.code-block-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 16px;
  border-bottom:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:12px;color:var(--muted);
}
.code-block-dots{display:flex;gap:6px;}
.code-block-dots span{width:8px;height:8px;border-radius:50%;background:var(--line);}
.code-block pre{
  padding:18px 20px;
  overflow-x:auto;
  font-family:var(--font-mono);
  font-size:13.5px;
  line-height:1.7;
  color:var(--ink-soft);
}

/* callout / note box — the "pull quote" role for a dev blog */
.callout{
  display:flex;gap:14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--accent-1);
  border-radius:6px;
  padding:18px 20px;
  margin:8px 0 32px;
}
.callout .icon{
  font-family:var(--font-mono);
  color:var(--accent-1);font-size:13px;font-weight:600;
  flex-shrink:0;
}
.callout p{font-size:15px;line-height:1.65;color:var(--ink);margin:0;}
.callout.warn{border-left-color:var(--caution);}
.callout.warn .icon{color:var(--caution);}

.tags{display:flex;gap:8px;margin-top:44px;padding-top:28px;border-top:1px solid var(--line);}

.author-card{
  display:flex;gap:16px;align-items:center;
  margin:44px 0;padding:24px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
}
.author-card .author-avatar{width:48px;height:48px;flex-shrink:0;}
.author-card h4{font-size:15px;margin-bottom:4px;}
.author-card p{font-size:13.5px;color:var(--muted);line-height:1.55;}

.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:44px 0 90px;}
.post-nav a{padding:20px;border:1px solid var(--line);border-radius:8px;background:var(--surface);}
.post-nav a:hover{border-color:var(--accent-1);}
.post-nav .dir{
  font-family:var(--font-mono);
  font-size:11.5px;letter-spacing:0.05em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px;
}
.post-nav .ptitle{font-size:15px;font-weight:600;line-height:1.4;}
.post-nav .next{text-align:right;}

.code-block .hljs-keyword,
.code-block .hljs-built_in { color: var(--accent-2); }

.code-block .hljs-string,
.code-block .hljs-regexp   { color: var(--accent-3); }

.code-block .hljs-comment,
.code-block .hljs-doctag   { color: var(--muted); font-style: italic; }

.code-block .hljs-title.function_,
.code-block .hljs-function { color: var(--accent-1); }

.code-block .hljs-title.class_,
.code-block .hljs-title.class_ .hljs-title { color: var(--accent-5); }

.code-block .hljs-number,
.code-block .hljs-literal  { color: var(--accent-3); }

.code-block .hljs-variable,
.code-block .hljs-params,
.code-block .hljs-attr,
.code-block .hljs-property { color: var(--accent-6); }

.code-block .hljs-tag,
.code-block .hljs-name     { color: var(--accent-2); }

.code-block .hljs-attribute,
.code-block .hljs-selector-class,
.code-block .hljs-selector-id { color: var(--accent-4); }

.code-block .hljs-meta      { color: var(--muted); }

.code-block .hljs-symbol    { color: var(--accent-5); }

.code-block .hljs-addition  { color: var(--success); }
.code-block .hljs-deletion  { color: var(--danger); }

.code-block .hljs-emphasis  { font-style: italic; }
.code-block .hljs-strong    { font-weight: bold; }

/* ---------- Project detail (individual project page) ----------------------- */
.project-hero{
  display:flex;gap:24px;align-items:flex-start;
  padding:8px 0 40px;
  border-bottom:1px solid var(--line);
}
/* Breadcrumb needs extra top space when it's the first element on the page */
.breadcrumb.top-spaced{margin-top:32px;}
/* Tighter bio variant, used when .bio sits directly under a section eyebrow */
.bio.tight{padding-top:0;padding-bottom:8px;}
.project-hero .project-icon.lg{width:64px;height:64px;border-radius:14px;flex-shrink:0;}
.project-hero h1{font-size:32px;font-weight:600;letter-spacing:-0.01em;margin:14px 0 12px;}
.project-hero .desc{font-size:16px;color:var(--muted);line-height:1.65;max-width:60ch;margin-bottom:18px;}

.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;}
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent-1);color:var(--bg);
  font-family:var(--font-sans);font-weight:600;font-size:14px;
  padding:12px 22px;border-radius:6px;
}
.btn-primary:hover{background:color-mix(in srgb, var(--accent-1) 82%, transparent);}
.btn-outline{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);color:var(--ink);
  font-family:var(--font-sans);font-size:14px;
  padding:12px 22px;border-radius:6px;
}
.btn-outline:hover{border-color:var(--accent-1);color:var(--accent-1);}

/* Roadmap / status checklist — used on tool-type projects */
.roadmap-list{display:flex;flex-direction:column;}
.roadmap-item{
  display:flex;align-items:center;gap:12px;
  padding:14px 0;border-top:1px solid var(--line);
  font-size:14.5px;color:var(--muted);
}
.roadmap-item:first-child{border-top:none;padding-top:0;}
.roadmap-item .check{
  width:18px;height:18px;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  border:1px solid var(--line);
  color:transparent;
}
.roadmap-item.done{color:var(--ink);}
.roadmap-item.done .check{background:color-mix(in srgb, var(--accent-1) 15%, transparent);border-color:var(--accent-1);color:var(--accent-1);}

/* Small muted note under a section eyebrow, e.g. "Posts written while..." */
.section-note{font-size:14px;color:var(--muted);margin-bottom:20px;}

/* Numbered post list — used on series-type projects, ordered rather than
   reverse-chronological, since a series often has a deliberate sequence */
.series-list{display:flex;flex-direction:column;}
.series-item{
  display:grid;grid-template-columns:44px 1fr auto;
  gap:20px;align-items:start;
  padding:22px 0;border-top:1px solid var(--line);
}
.series-item:first-child{border-top:none;padding-top:0;}
.series-item:hover .series-title{color:var(--accent-1);}
.series-num{font-family:var(--font-mono);font-size:13px;color:var(--muted);padding-top:3px;}
.series-title{font-size:17px;font-weight:600;margin-bottom:6px;line-height:1.35;}
.series-excerpt{font-size:13.5px;color:var(--muted);line-height:1.55;max-width:52ch;}
.series-meta{
  font-family:var(--font-mono);font-size:12px;color:var(--muted);
  text-align:right;white-space:nowrap;padding-top:3px;
}

/* ---------- About ---------------------------------------------------------- */
.about-hero{
  padding:64px 0 48px;
  display:flex;gap:28px;align-items:center;
  border-bottom:1px solid var(--line);
}
.avatar{
  width:88px;height:88px;border-radius:14px;flex-shrink:0;
  background-image:url('/assets/images/takibyte_bin.webp');background-size:cover;background-position:center;
  /* background:linear-gradient(135deg,var(--accent-2),#3a2f6e); */
}
.about-hero h1{font-size:30px;font-weight:600;letter-spacing:-0.01em;margin-bottom:8px;}
.about-hero p{font-size:15px;color:var(--muted);line-height:1.6;max-width:48ch;}

.stats-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  margin:36px 0;
}
.stat{background:var(--surface);padding:20px;text-align:center;}
.stat .num{font-family:var(--font-mono);font-size:22px;font-weight:600;color:var(--accent-1);}
.stat .label{font-size:11.5px;color:var(--muted);margin-top:4px;letter-spacing:0.02em;}

/* .bio{padding:12px 0 44px;font-size:16px;line-height:1.75;color:#c7cdd6;} */
.bio{padding:12px 0 44px;font-size:16px;line-height:1.75;color:var(--ink-soft);}
.bio p{margin-bottom:22px;}
.bio a{color:var(--accent-1);border-bottom:1px solid color-mix(in srgb, var(--accent-1) 35%, transparent);}
.bio a:hover{border-color:var(--accent-1);}
.bio code{
  font-family:var(--font-mono);
  font-size:0.87em;
  background:var(--surface);
  border:1px solid var(--line);
  padding:2px 6px;border-radius:4px;
  color:var(--accent-3);
}

.section{padding:36px 0;border-top:1px solid var(--line);}
.section .eyebrow{
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:18px;
}

.stack-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:10px;}
.stack-item{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  padding:14px 16px;
  font-family:var(--font-mono);
  font-size:13px;
}
.stack-item .cat{color:var(--muted);font-size:11px;margin-bottom:4px;}
.stack-item .val{color:var(--ink);}

.connect-list{display:flex;flex-direction:column;}
.connect-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 0;
  border-top:1px solid var(--line);
}
.connect-row:first-child{border-top:none;padding-top:0;}
.connect-row .platform{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500;}
.connect-row .platform .dot-icon{width:8px;height:8px;border-radius:50%;}
.connect-row .handle{font-family:var(--font-mono);font-size:13px;color:var(--muted);}
.connect-row:hover .handle{color:var(--accent-1);}

.colophon{
  padding:36px 0 20px;
  font-family:var(--font-mono);
  font-size:12.5px;color:var(--muted);line-height:1.8;
}
.colophon a{color:var(--accent-1);}


/* ==========================================================================
   6. RESPONSIVE
   Breakpoints kept per-page to match each layout's own grid behavior.
   ========================================================================== */

/* ---- Home ---- */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr);}
  nav{display:none;}
  .subscribe{display:none;}
  .menu-toggle{display:flex;}
  .mobile-nav{display:block;}
  #theme-select{display:none;}
  .theme-select.mobile{display:block;}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr;}
}

/* ---- Projects ---- */
@media (max-width:800px){
  .project-grid{grid-template-columns:1fr;}
}

/* ---- Shared: Projects / Posts / Post / About all collapse nav at 700-800px ---- */
@media (max-width:800px){
  nav{display:none;}
  .subscribe{display:none;}
  .menu-toggle{display:flex;}
  .mobile-nav{display:block;}
  #theme-select{display:none;}
}

/* ---- Posts (archive) ---- */
@media (max-width:700px){
  .post-row{grid-template-columns:1fr;gap:8px;}
  .post-meta{text-align:left;}
}

/* ---- Post (individual) ---- */
@media (max-width:700px){
  h1.headline{font-size:28px;}
  article.body{font-size:16px;}
  .post-nav{grid-template-columns:1fr;}
  
  .meta-row .stats{display:none;}
}
@media (max-width:700px){

}

/* ---- About ---- */
@media (max-width:700px){
  .about-hero{flex-direction:column;text-align:center;align-items:center;}
  .stats-strip{grid-template-columns:repeat(2,1fr);}
  .stack-grid{grid-template-columns:1fr 1fr;}
}