/* ============================================================
   lbyte Theme — lbyte.css
   Warm editorial dark/light theme
   Fonts: Playfair Display (serif) + Geist (sans) + Geist Mono
   ============================================================ */

/* ── Design tokens — Light (default) ───────────────────────── */
:root {
  --bg:       #F8F5F0;
  --bg2:      #F1EDE6;
  --bg3:      #E9E4DC;
  --line:     #DDD8D0;
  --ink:      #18140F;
  --ink2:     #3D3830;
  --ink3:     #8A837A;
  --ink4:     #B5AFA8;
  --rust:     #C05A30;
  --rs:       rgba(192,90,48,.09);
  --nav-bg:   rgba(248,245,240,.93);
  --pre-bg:   #18140F;
  --pre-txt:  #E8E0D0;
  --shadow:   rgba(0,0,0,.07);
  --toc-hl:   rgba(192,90,48,.08);
  --toggle-track: #DDD8D0;
  --toggle-dark:  #3A342C;
  --serif:    'Playfair Display', Georgia, serif;
  --sans:     'Geist', system-ui, -apple-system, sans-serif;
  --mono:     'Geist Mono', 'Fira Code', monospace;
  --ease:     cubic-bezier(.16,1,.3,1);
}

/* ── Dark mode overrides ────────────────────────────────────── */
[data-theme="dark"] {
  --bg:       #18140F;
  --bg2:      #201C16;
  --bg3:      #2A2520;
  --line:     #332E27;
  --ink:      #F0EBE3;
  --ink2:     #C8C0B5;
  --ink3:     #7A726A;
  --ink4:     #4A4540;
  --rust:     #E07848;
  --rs:       rgba(224,120,72,.10);
  --nav-bg:   rgba(24,20,15,.95);
  --pre-bg:   #0F0C09;
  --pre-txt:  #D4C8B8;
  --shadow:   rgba(0,0,0,.35);
  --toc-hl:   rgba(224,120,72,.10);
  --toggle-track: #3A342C;
}

/* ── Reset & base ───────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }
body {
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  transition:background .3s,color .3s;
  cursor:none; /* hide native cursor — custom one takes over */
}
a { text-decoration:none; color:inherit; cursor:none; }
img { display:block; max-width:100%; }
button { border:none; background:none; cursor:none; }

/* ── Custom cursor ──────────────────────────────────────────── */
.cursor {
  position:fixed; top:0; left:0; z-index:9999;
  pointer-events:none; /* never intercept clicks */
}
.c-ball {
  width:9px; height:9px;
  background:var(--rust); border-radius:50%;
  position:absolute; transform:translate(-50%,-50%);
  transition:width .3s var(--ease),height .3s var(--ease),
             opacity .3s,background .35s;
}
.c-ring {
  width:38px; height:38px;
  border:1px solid rgba(192,90,48,.35); border-radius:50%;
  position:absolute; transform:translate(-50%,-50%);
  transition:width .25s var(--ease),height .25s var(--ease),
             border-color .35s;
}
[data-theme="dark"] .c-ring { border-color:rgba(224,120,72,.35); }

/* Grow ring on interactive elements */
body:has(a:hover) .c-ring,
body:has(button:hover) .c-ring {
  width:54px; height:54px;
  border-color:rgba(192,90,48,.55);
}
[data-theme="dark"] body:has(a:hover) .c-ring,
[data-theme="dark"] body:has(button:hover) .c-ring {
  border-color:rgba(224,120,72,.55);
}

/* Touch / pointer:coarse → hide custom cursor, restore native */
@media (pointer:coarse) {
  .cursor { display:none; }
  body,a,button { cursor:auto; }
  a { cursor:pointer; }
  button { cursor:pointer; }
}

/* ── Site wrapper ───────────────────────────────────────────── */
.site-wrapper { min-height:calc(100vh - 60px - 80px); padding-top:60px; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 48px; height:60px;
  background:var(--nav-bg); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .3s,border-color .3s;
}
.nav-logo {
  display:flex; align-items:baseline; gap:6px;
  text-decoration:none;
}
.nav-logo-mark {
  font-family:var(--serif); font-size:19px; font-weight:500;
  color:var(--ink); transition:color .3s;
}
.nav-logo-sub {
  font-family:var(--mono); font-size:10px;
  color:var(--ink3); letter-spacing:.06em; transition:color .3s;
}
.nav-links { display:flex; align-items:center; }
.nav-link {
  font-family:var(--sans); font-size:12px; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink3); padding:0 14px; height:60px;
  display:flex; align-items:center; gap:6px;
  position:relative; transition:color .2s;
}
.nav-link::after {
  content:''; position:absolute; bottom:0; left:14px; right:14px;
  height:2px; background:var(--rust);
  transform:scaleX(0); transform-origin:right;
  transition:transform .3s var(--ease);
}
.nav-link:hover { color:var(--ink); }
.nav-link:hover::after,
.nav-link.active::after { transform:scaleX(1); transform-origin:left; }
.nav-link.active { color:var(--rust); }
.nav-link-icon { font-size:11px; }
.nav-right { display:flex; align-items:center; gap:12px; }

/* Theme toggle pill */
.theme-toggle {
  background:none; border:none; cursor:pointer; padding:0;
  width:52px; height:28px; position:relative; flex-shrink:0;
}
.toggle-track {
  position:absolute; inset:0;
  background:var(--toggle-track);
  border-radius:100px;
  border:1px solid var(--line);
  transition:background .3s,border-color .3s;
  display:block;
}
[data-theme="dark"] .toggle-track { background:var(--toggle-dark); }
.toggle-knob {
  position:absolute; top:3px; left:3px;
  width:20px; height:20px;
  background:var(--bg); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s var(--ease),background .3s;
  box-shadow:0 1px 4px var(--shadow);
  font-size:11px; line-height:1;
}
[data-theme="dark"] .toggle-knob { transform:translateX(24px); }
.icon-moon { display:none; }
[data-theme="dark"] .icon-sun  { display:none; }
[data-theme="dark"] .icon-moon { display:block; }

/* Hamburger — mobile only */
.nav-hamburger {
  display:none; flex-direction:column; gap:5px;
  padding:8px; background:none; border:none; cursor:pointer;
}
.nav-hamburger span {
  display:block; width:22px; height:1.5px;
  background:var(--ink3); transition:all .25s;
}

/* Mobile drawer */
.nav-drawer {
  position:fixed; top:60px; left:0; right:0; z-index:190;
  background:var(--nav-bg); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  max-height:0; overflow:hidden;
  transition:max-height .35s var(--ease);
}
.nav-drawer.open { max-height:320px; }
.nav-drawer-link {
  display:flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink3);
  padding:14px 24px; border-bottom:1px solid var(--line);
  transition:color .2s,background .2s;
}
.nav-drawer-link:hover,
.nav-drawer-link.active { color:var(--rust); background:var(--bg2); }

/* ============================================================
   HERO (index page)
   ============================================================ */
.hero {
  padding:100px 48px 0;
  border-bottom:1px solid var(--line);
  transition:border-color .3s;
}
.hero-inner {
  display:grid; grid-template-columns:1fr 400px;
  gap:64px; align-items:end; padding-bottom:48px;
}
.hero-eyebrow {
  display:flex; align-items:center; gap:12px; margin-bottom:20px;
  opacity:0; animation:fadeUp .7s var(--ease) .1s forwards;
}
.hero-eyebrow span {
  font-family:var(--mono); font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink3);
}
.hero-eyebrow-dot {
  width:4px; height:4px; border-radius:50%; background:var(--rust);
}
.hero-h1 {
  font-family:var(--serif);
  font-size:clamp(48px,7vw,96px);
  font-weight:400; line-height:.95; letter-spacing:-.02em; color:var(--ink);
}
.hero-h1 .ln { display:block; overflow:hidden; }
.hero-h1 .ln span {
  display:block; transform:translateY(110%);
  animation:slideUp 1s var(--ease) forwards;
}
.hero-h1 .ln:nth-child(1) span { animation-delay:.15s; }
.hero-h1 .ln:nth-child(2) span { animation-delay:.28s; }
.hero-h1 .ln:nth-child(3) span { animation-delay:.41s; }
.hero-h1 em { font-style:italic; color:var(--rust); }
.hero-right { padding-bottom:4px; opacity:0; animation:fadeUp .7s var(--ease) .6s forwards; }
.hero-desc { font-size:14px; line-height:1.85; color:var(--ink3); margin-bottom:24px; }
.hero-tags { display:flex; flex-wrap:wrap; gap:6px; }
.hero-tag {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  padding:4px 10px; border:1px solid var(--line); color:var(--ink3);
  transition:border-color .2s, color .2s, background .2s;
}
.hero-tag:hover { border-color:var(--rust); color:var(--rust); background:var(--rs); }
.hero-tag-count {
  font-size:9px; color:var(--ink4); line-height:1;
  background:var(--bg3); padding:1px 5px;
  transition:color .2s, background .2s;
}
.hero-tag:hover .hero-tag-count { background:var(--rs); color:var(--rust); }
.hero-tag-more {
  border-style:dashed; color:var(--ink4); letter-spacing:.05em;
}
.hero-tag-more:hover { border-color:var(--rust); color:var(--rust); border-style:dashed; }
.hero-feat {
  border-top:1px solid var(--line); padding:22px 0;
  display:flex; align-items:center; gap:20px;
  opacity:0; animation:fadeUp .7s var(--ease) .8s forwards;
  transition:border-color .3s;
}
.feat-label {
  font-family:var(--mono); font-size:9px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink4); flex-shrink:0;
}
.feat-divider { width:1px; height:32px; background:var(--line); flex-shrink:0; }
.feat-card {
  flex:1; display:flex; align-items:baseline; gap:16px;
  padding:8px 16px; border-left:2px solid var(--rust);
  background:var(--rs); transition:background .2s; cursor:pointer;
}
.feat-card:hover { background:rgba(192,90,48,.14); }
[data-theme="dark"] .feat-card:hover { background:rgba(224,120,72,.15); }
.feat-cat {
  font-family:var(--mono); font-size:9px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--rust); flex-shrink:0;
}
.feat-title { font-family:var(--serif); font-size:15px; color:var(--ink); line-height:1.3; }
.feat-arrow { font-size:16px; color:var(--rust); margin-left:auto; flex-shrink:0; transition:transform .2s; }
.feat-card:hover .feat-arrow { transform:translateX(4px); }

/* ============================================================
   BLOG INDEX GRID
   ============================================================ */
.blog-index { display:grid; grid-template-columns:1fr 320px; }
.posts-main { border-right:1px solid var(--line); transition:border-color .3s; }

/* Post row */
.post-row {
  display:grid; grid-template-columns:56px 1fr auto;
  gap:20px; align-items:start;
  padding:28px 48px; border-bottom:1px solid var(--line);
  transition:background .2s,padding-left .25s var(--ease),border-color .3s;
}
.post-row:hover { background:var(--bg2); padding-left:60px; }
.post-row-num {
  font-family:var(--mono); font-size:11px; color:var(--ink4); padding-top:4px;
}
.post-row-meta { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.post-cat {
  font-family:var(--mono); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--rust);
}
.post-date { font-family:var(--mono); font-size:9px; color:var(--ink4); }
.post-meta-dot { width:3px; height:3px; border-radius:50%; background:var(--line); }
.post-title {
  font-family:var(--serif); font-size:22px; color:var(--ink);
  line-height:1.2; margin-bottom:8px; font-weight:400;
}
.post-title a { color:inherit; transition:color .2s; }
.post-row:hover .post-title a { color:var(--rust); }
.post-excerpt {
  font-size:13px; line-height:1.7; color:var(--ink3);
  max-width:540px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.post-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.post-tag {
  font-family:var(--mono); font-size:9px; padding:3px 8px;
  border:1px solid var(--line); color:var(--ink3);
  transition:all .2s;
}
.post-tag:hover { border-color:var(--rust); color:var(--rust); }
.post-row-right {
  display:flex; flex-direction:column; align-items:flex-end;
  gap:8px; padding-top:4px; flex-shrink:0;
}
.post-read-time { font-family:var(--mono); font-size:9px; color:var(--ink4); }
.post-arrow { font-size:18px; color:var(--line); transition:color .3s,transform .3s; }
.post-row:hover .post-arrow { color:var(--rust); transform:translateX(4px); }

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  padding:32px 24px; position:sticky; top:80px;
  align-self:start; display:flex; flex-direction:column; gap:28px;
}
.sb-section {}
.sb-ttl {
  font-family:var(--mono); font-size:9px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink4);
  margin-bottom:14px; display:flex; align-items:center; gap:10px;
}
.sb-ttl::before { content:''; width:14px; height:1px; background:var(--rust); }
.sb-name { font-family:var(--serif); font-size:18px; color:var(--ink); margin-bottom:8px; }
.sb-name em { font-style:italic; color:var(--rust); }
.sb-bio { font-size:12px; line-height:1.75; color:var(--ink3); }
.sb-link {
  display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rust);
  border-bottom:1px solid rgba(192,90,48,.3); padding-bottom:1px;
  transition:border-color .2s;
}
.sb-link:hover { border-color:var(--rust); }
.sb-hr { height:1px; background:var(--line); }
.sb-stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.sb-stat { padding:12px; background:var(--bg2); border:1px solid var(--line); }
.sb-stat-num { font-family:var(--serif); font-size:24px; color:var(--ink); line-height:1; }
.sb-stat-lbl { font-family:var(--mono); font-size:9px; letter-spacing:.1em; color:var(--ink3); margin-top:4px; }
.sb-tags { display:flex; flex-wrap:wrap; gap:6px; }
.sb-tag {
  font-family:var(--mono); font-size:10px; padding:4px 10px;
  border:1px solid var(--line); color:var(--ink3);
  display:flex; align-items:center; gap:4px; transition:all .2s;
}
.sb-tag:hover { border-color:var(--rust); color:var(--rust); background:var(--rs); }
.sb-tag-count { font-size:9px; color:var(--ink4); }
.sb-recent { display:flex; flex-direction:column; }
.sb-recent-item {
  display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; padding:8px 0; border-bottom:1px solid var(--line);
  transition:padding-left .2s;
}
.sb-recent-item:hover { padding-left:4px; }
.sb-recent-item:last-child { border-bottom:none; }
.sb-recent-title { font-size:12px; color:var(--ink2); line-height:1.4; flex:1; }
.sb-recent-item:hover .sb-recent-title { color:var(--rust); }
.sb-recent-date { font-family:var(--mono); font-size:9px; color:var(--ink4); flex-shrink:0; }

/* ── Pagination ──────────────────────────────────────────────── */
.pagination-wrap { padding:28px 48px; border-top:1px solid var(--line); }
.pagination {
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.pagination-btn {
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; padding:8px 20px;
  border:1px solid var(--line); color:var(--ink3);
  transition:all .2s;
}
.pagination-btn:hover:not(.disabled) { border-color:var(--rust); color:var(--rust); }
.pagination-btn.disabled { opacity:.4; cursor:default; }
.pagination-pages { display:flex; align-items:center; gap:4px; }
.pagination-page {
  font-family:var(--mono); font-size:12px;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); color:var(--ink3);
  transition:all .2s;
}
.pagination-page:hover { border-color:var(--rust); color:var(--rust); }
.pagination-page.active { background:var(--rust); border-color:var(--rust); color:var(--bg); }
.pagination-ellipsis { font-family:var(--mono); color:var(--ink4); padding:0 4px; }

/* ============================================================
   ARTICLE VIEW
   ============================================================ */
.article-layout {
  display:grid;
  grid-template-columns:1fr min(680px,100%) minmax(180px,220px) 1fr;
  grid-template-areas:". article toc .";
  padding:80px 0;
}
.article-layout.has-toc { }
.article-main { grid-area:article; padding:0 40px 0 48px; border-right:1px solid var(--line); }
.article-main--page { border-right:none; }
.art-back {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink3);
  margin-bottom:40px; padding-bottom:2px;
  border-bottom:1px solid var(--line); transition:color .2s;
}
.art-back:hover { color:var(--rust); }
.art-cat {
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--rust); margin-bottom:14px;
}
.art-title {
  font-family:var(--serif); font-size:clamp(32px,4.5vw,56px);
  font-weight:400; line-height:1.05; letter-spacing:-.02em;
  color:var(--ink); margin-bottom:20px;
}
.art-title em { font-style:italic; color:var(--rust); }
.art-meta {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin-bottom:40px;
}
.art-meta-item { font-family:var(--mono); font-size:10px; color:var(--ink3); letter-spacing:.06em; }
.art-meta-div { width:1px; height:12px; background:var(--line); }
.art-tags {
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:48px; padding-top:24px; border-top:1px solid var(--line);
}
.art-tag {
  font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  padding:5px 12px; border:1px solid var(--line); color:var(--ink3);
  transition:all .2s;
}
.art-tag:hover { border-color:var(--rust); color:var(--rust); }

/* Copyright strip */
.art-copyright {
  margin-top:32px; padding:16px 20px; background:var(--bg2);
  border:1px solid var(--line); border-left:3px solid var(--rust);
}
.art-copyright-row {
  display:flex; gap:16px; align-items:baseline;
  padding:4px 0; font-size:12px;
}
.art-copyright-lbl {
  font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink4); width:60px; flex-shrink:0;
}
.art-copyright-link { color:var(--rust); word-break:break-all; }

/* Prev/next nav */
.art-nav {
  display:flex; justify-content:space-between; gap:16px;
  margin-top:48px; padding-top:24px; border-top:1px solid var(--line);
}
.art-nav-item {
  display:flex; flex-direction:column; gap:4px;
  padding:14px 18px; border:1px solid var(--line);
  max-width:48%; transition:all .2s;
}
.art-nav-item:hover { border-color:var(--rust); background:var(--rs); }
.art-nav-next { text-align:right; }
.art-nav-dir { font-family:var(--mono); font-size:9px; letter-spacing:.14em; color:var(--rust); }
.art-nav-title { font-family:var(--serif); font-size:15px; color:var(--ink); line-height:1.3; }

/* ── Markdown body ───────────────────────────────────────────── */
.markdown-body { font-size:15px; line-height:1.9; color:var(--ink2); }
.markdown-body h1,
.markdown-body h2 {
  font-family:var(--serif); font-size:26px; font-weight:400;
  color:var(--ink); margin:44px 0 14px; letter-spacing:-.01em;
  scroll-margin-top:90px;
}
.markdown-body h3 {
  font-family:var(--serif); font-size:20px; font-weight:400; font-style:italic;
  color:var(--ink); margin:32px 0 12px; scroll-margin-top:90px;
}
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink); margin:24px 0 10px;
}
.markdown-body p { margin-bottom:20px; }
.markdown-body a { color:var(--rust); border-bottom:1px solid rgba(192,90,48,.3); transition:border-color .2s; }
.markdown-body a:hover { border-color:var(--rust); }
.markdown-body strong { font-weight:500; color:var(--ink); }
.markdown-body em { font-style:italic; }
.markdown-body code {
  font-family:var(--mono); font-size:13px;
  background:var(--bg3); border:1px solid var(--line);
  padding:2px 6px; color:var(--rust);
}
/* ── Code block wrapper (JS injects .code-block around pre/figure) ── */
.code-block {
  position:relative; margin:24px 0; border:1px solid var(--line);
  background:var(--pre-bg);
}
.code-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; height:38px;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--line);
}
[data-theme="dark"] .code-header { background:rgba(255,255,255,.02); }
.code-lang {
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink4);
  display:flex; align-items:center; gap:8px;
}
.code-lang::before {
  content:''; display:block; width:7px; height:7px;
  border-radius:50%; background:var(--rust); opacity:.7;
}
.code-copy-btn {
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  padding:4px 10px; border:1px solid transparent;
  color:var(--ink4); background:transparent; cursor:pointer;
  transition:all .2s; border-radius:2px;
}
.code-copy-btn:hover { border-color:var(--line); color:var(--ink2); background:var(--bg3); }
.code-copy-btn.copied { border-color:var(--rust); color:var(--rust); }
.code-copy-btn svg { flex-shrink:0; }

/* ── .code-body: the ONE scroll + padding container ───────────
   JS injects this div between .code-block and the figure/pre.
   Everything inside is zeroed out so only .code-body controls layout. */
.code-body {
  overflow-x:auto;
  background:var(--pre-bg);
  padding:10px 0 14px;
  /* slim scrollbar */
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}
.code-body::-webkit-scrollbar { height:3px; }
.code-body::-webkit-scrollbar-track { background:transparent; }
.code-body::-webkit-scrollbar-thumb { background:var(--line); border-radius:10px; }
.code-body::-webkit-scrollbar-thumb:hover { background:var(--ink4); }
.code-body::-webkit-scrollbar-button { display:none; width:0; height:0; }
.code-body::-webkit-scrollbar-corner { background:transparent; }

/* JS extracts <pre> from the Hexo figure and places it directly here.
   No figure/table/tbody/tr/td remains in the DOM — just pre > code.
   Use !important to beat any .markdown-body pre rules that still apply. */
.code-body pre {
  margin:0 !important; padding:0 20px !important;
  border:none !important; background:none !important;
  overflow:visible !important; white-space:pre !important;
  display:block !important;
}
.code-body pre code {
  padding:0 !important; margin:0 !important;
  background:none !important; border:none !important;
  display:inline !important;           /* NOT block — avoids phantom blank line */
  color:var(--pre-txt); font-size:13px; line-height:1.75; font-family:var(--mono);
}

/* Standalone .markdown-body pre (not inside .code-block) */
.markdown-body pre {
  background:var(--pre-bg); padding:16px 20px; margin:0; overflow-x:auto;
  border:none; scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.markdown-body pre code {
  background:none; border:none; padding:0;
  color:var(--pre-txt); font-size:13px; line-height:1.75; font-family:var(--mono);
}

/* ══════════════════════════════════════════════════════════════
   SYNTAX HIGHLIGHTING — "lbyte One Dark"
   Works on top of Hexo's built-in highlight.js (hljs-* classes).
   Both light and dark modes share the same tokens because
   --pre-bg is always dark in this theme.
   ══════════════════════════════════════════════════════════════ */

/* Base */
.hljs                               { color:#d4c8b8; background:transparent; }

/* Keywords: if / for / return / import / class … */
.hljs-keyword,
.hljs-selector-tag,
.hljs-tag                           { color:#c792ea; }

/* Strings and template literals */
.hljs-string,
.hljs-template-string,
.hljs-addition                      { color:#9ec4a0; }

/* Numbers, booleans, null */
.hljs-number,
.hljs-literal                       { color:#f78c6c; }

/* Comments */
.hljs-comment,
.hljs-quote                         { color:#5c6472; font-style:italic; }

/* Function & method names */
.hljs-title,
.hljs-title.function_               { color:#82aaff; }

/* Class / type names */
.hljs-title.class_,
.hljs-class .hljs-title,
.hljs-type                          { color:#ffcb6b; }

/* Built-in functions (echo, print, len…) */
.hljs-built_in                      { color:#ffcb6b; }

/* Template-literal interpolations ${…} */
.hljs-subst                         { color:#f78c6c; }

/* Attributes (HTML/JSX/YAML) */
.hljs-attr,
.hljs-attribute                     { color:#ffd580; }

/* Shell prompt $ / preprocessor # / decorators @ */
.hljs-meta,
.hljs-meta .hljs-keyword            { color:#e07848; }

/* Variables, params, self */
.hljs-variable,
.hljs-params,
.hljs-template-variable             { color:#d4c8b8; }

/* Operators, punctuation */
.hljs-operator,
.hljs-punctuation                   { color:#89ddff; }

/* Selectors (CSS) */
.hljs-selector-class,
.hljs-selector-id,
.hljs-selector-pseudo               { color:#c792ea; }

/* HTML tag names */
.hljs-name                          { color:#f07178; }

/* Links, symbols, regexp */
.hljs-link,
.hljs-symbol,
.hljs-regexp                        { color:#89ddff; }

/* Deletions / diff */
.hljs-deletion                      { color:#f07178; background:rgba(240,113,120,.15); }
.hljs-addition                      { color:#9ec4a0; background:rgba(158,196,160,.12); }

/* Section / bullet */
.hljs-section,
.hljs-bullet                        { color:#ffcb6b; }

/* Strong / emphasis (Markdown) */
.hljs-strong                        { font-weight:700; }
.hljs-emphasis                      { font-style:italic; }

.markdown-body blockquote {
  border-left:3px solid var(--rust); padding:14px 22px;
  margin:24px 0; background:var(--rs);
}
.markdown-body blockquote p {
  font-family:var(--serif); font-size:18px; font-style:italic;
  color:var(--ink2); margin-bottom:0;
}
.markdown-body ul,
.markdown-body ol { padding-left:20px; margin-bottom:20px; }
.markdown-body li { margin-bottom:8px; }
.markdown-body table { width:100%; border-collapse:collapse; margin:24px 0; font-size:14px; }
.markdown-body th { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:8px 12px; border-bottom:2px solid var(--line); text-align:left; color:var(--ink3); }
.markdown-body td { padding:10px 12px; border-bottom:1px solid var(--line); color:var(--ink2); }
.markdown-body tr:hover td { background:var(--bg2); }
.markdown-body img { max-width:100%; margin:24px auto; border:1px solid var(--line); }
.markdown-body hr { border:none; border-top:1px solid var(--line); margin:40px 0; }

/* ── TOC side rail ──────────────────────────────────────────── */
.toc-rail {
  grid-area:toc; padding:0 0 0 28px;
  position:sticky; top:80px; align-self:start;
  max-height:calc(100vh - 100px); overflow-y:auto;
  scrollbar-width:none;
}
.toc-rail::-webkit-scrollbar { display:none; }
.toc-prog-wrap { margin-bottom:14px; }
.toc-prog-lbl {
  font-family:var(--mono); font-size:9px; color:var(--ink4);
  margin-bottom:6px; display:flex; justify-content:space-between;
}
.toc-prog-track { height:2px; background:var(--line); overflow:hidden; }
.toc-prog-fill { height:100%; background:var(--rust); width:0%; transition:width .1s; }
.toc-label {
  font-family:var(--mono); font-size:9px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink4);
  margin-bottom:12px; display:flex; align-items:center; gap:8px;
}
.toc-label::before { content:''; width:12px; height:1px; background:var(--rust); }

/* Hexo toc() generates a <ol class="toc-list"> */
.toc-list,.toc-list ol { list-style:none; padding:0; }
.toc-list a {
  display:block; padding:5px 10px; font-size:11.5px; line-height:1.4;
  color:var(--ink3); border-left:2px solid var(--line);
  transition:color .2s,border-color .2s,background .2s; word-break:break-word;
}
.toc-list a:hover { color:var(--ink); border-left-color:var(--ink4); }
.toc-list .is-active-link {
  color:var(--rust); border-left-color:var(--rust);
  background:var(--toc-hl); font-weight:500;
}
.toc-list .toc-child { padding-left:10px; }
.toc-list .toc-child a { font-size:11px; color:var(--ink4); }

/* ── Mobile TOC drawer ──────────────────────────────────────── */
.toc-mobile {
  display:none; /* shown at ≤768px */
  margin:0 0 32px;
  border:1px solid var(--line); border-left:3px solid var(--rust);
  overflow:hidden;
}
.toc-mob-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; background:var(--bg2);
  cursor:pointer; user-select:none;
}
.toc-mob-hdr:hover { background:var(--bg3); }
.toc-mob-title {
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink3);
  display:flex; align-items:center; gap:8px;
}
.toc-mob-title::before { content:''; width:10px; height:1px; background:var(--rust); }
.toc-mob-chev { font-size:10px; color:var(--ink4); transition:transform .25s var(--ease); }
.toc-mobile.open .toc-mob-chev { transform:rotate(180deg); }
.toc-mob-body { max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.toc-mobile.open .toc-mob-body { max-height:600px; }

/* Mobile TOC inherits .toc-list styles */
.toc-mob-list { list-style:none; padding:8px 0; }
.toc-mob-list a {
  display:block; padding:7px 16px; font-size:13px;
  color:var(--ink3); border-left:2px solid transparent;
  transition:color .2s,border-color .2s,background .2s;
}
.toc-mob-list a:hover { color:var(--ink); background:var(--bg3); }
.toc-mob-list .is-active-link { color:var(--rust); border-left-color:var(--rust); background:var(--rs); }

/* ============================================================
   COMMENTS SECTION (Waline container)
   ============================================================ */
.comments-section { margin-top:64px; padding-top:48px; border-top:1px solid var(--line); }
.comments-heading { font-family:var(--serif); font-size:28px; font-weight:400; color:var(--ink); margin-bottom:8px; }
.comments-heading em { font-style:italic; color:var(--rust); }
.comments-sub { font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--ink3); margin-bottom:32px; }

/* Waline dark mode */
[data-theme="dark"] .wl-comment { background:var(--bg2); }

/* ============================================================
   ARCHIVE PAGE
   ============================================================ */
/* page-hero ln — same slide-up as hero-h1 */
.page-hero-h1 .ln { display:block; overflow:hidden; }
.page-hero-h1 .ln span { display:block; transform:translateY(110%); animation:slideUp .9s var(--ease) forwards; }
.page-hero-h1 .ln:nth-child(1) span { animation-delay:.12s; }
.page-hero-h1 .ln:nth-child(2) span { animation-delay:.26s; }

/* archive hero meta */
.archive-hero-meta { display:flex; align-items:center; gap:10px; }
.archive-hero-stat { font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink3); }
.archive-hero-sep { color:var(--line); }

.archive-list { padding:48px; display:flex; flex-direction:column; gap:56px; }
.archive-year-hdr {
  display:flex; align-items:center; gap:20px;
  margin-bottom:4px;
}
.archive-year-num {
  font-family:var(--serif); font-size:clamp(56px,6vw,88px); font-weight:400;
  color:var(--ink); line-height:1; flex-shrink:0;
  transition:color .3s;
}
.archive-year-rule { flex:1; height:1px; background:var(--line); transition:background .3s; }
.archive-year-count {
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rust);
  background:rgba(192,90,48,.08); border:1px solid rgba(192,90,48,.2);
  padding:3px 10px; flex-shrink:0;
}
.archive-items { list-style:none; display:flex; flex-direction:column; margin-top:8px; }
.archive-item {
  display:grid; grid-template-columns:68px 1fr auto auto;
  gap:20px; align-items:center;
  padding:14px 0; border-bottom:1px solid var(--line);
  position:relative; transition:padding-left .22s var(--ease);
}
.archive-item:hover { padding-left:10px; }
.archive-item:last-child { border-bottom:none; }
.archive-item-date { font-family:var(--mono); font-size:10px; color:var(--ink4); letter-spacing:.04em; white-space:nowrap; }
.archive-item-title { font-family:var(--serif); font-size:clamp(16px,1.6vw,20px); color:var(--ink); line-height:1.2; transition:color .22s; }
.archive-item:hover .archive-item-title { color:var(--rust); }
.archive-item-cat {
  font-family:var(--mono); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink3); white-space:nowrap;
}
.archive-item-arrow {
  font-family:var(--serif); font-size:16px; color:var(--rust);
  opacity:0; transform:translateX(-4px);
  transition:opacity .2s, transform .2s;
}
.archive-item:hover .archive-item-arrow { opacity:1; transform:translateX(0); }

/* ============================================================
   TAG / CATEGORY PAGES
   ============================================================ */

/* ── Tag search bar ─────────────────────────────────────────── */
.tag-search-wrap {
  padding:0 48px 0; margin-bottom:0;
}
.tag-search-inner {
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--line); background:var(--bg2);
  padding:0 14px; height:42px; transition:border-color .2s;
}
.tag-search-inner:focus-within { border-color:var(--rust); }
.tag-search-icon { color:var(--ink4); flex-shrink:0; }
.tag-search-input {
  flex:1; background:none; border:none; outline:none;
  font-family:var(--mono); font-size:13px; color:var(--ink);
  caret-color:var(--rust);
}
.tag-search-input::placeholder { color:var(--ink4); }
.tag-search-count {
  font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--ink4);
  flex-shrink:0; min-width:60px; text-align:right;
}

/* Alphabetical tag index */
.tag-index {
  padding:48px; display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:40px 48px; align-items:start;
}
.tag-index-group {}
.tag-index-letter {
  font-family:var(--serif); font-size:clamp(40px,5vw,64px);
  font-weight:400; color:var(--line); line-height:1;
  margin-bottom:16px; transition:color .3s;
}
.tag-index-list { list-style:none; display:flex; flex-direction:column; border-top:1px solid var(--line); }
.tag-index-item { border-bottom:1px solid var(--line); }
.tag-index-link {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; padding:10px 0;
  position:relative; transition:padding-left .2s var(--ease);
}
.tag-index-link:hover { padding-left:6px; }
.tag-index-name {
  font-family:var(--serif); font-size:16px; color:var(--ink);
  transition:color .2s;
}
.tag-index-link:hover .tag-index-name { color:var(--rust); }
.tag-index-count {
  font-family:var(--mono); font-size:10px; color:var(--ink4);
  letter-spacing:.04em; white-space:nowrap; flex-shrink:0;
  transition:color .2s;
}
.tag-index-link:hover .tag-index-count { color:var(--rust); }

.category-list { display:flex; flex-direction:column; padding:48px; }
.category-item {
  display:flex; align-items:center; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--line);
  position:relative; transition:padding-left .2s;
}
.category-item:hover { padding-left:8px; }
.category-name { font-family:var(--serif); font-size:22px; color:var(--ink); flex:1; transition:color .2s; }
.category-item:hover .category-name { color:var(--rust); }
.category-count { font-family:var(--mono); font-size:10px; color:var(--ink3); }
.category-arrow { color:var(--rust); margin-left:auto; }

.posts-simple { padding:48px; display:flex; flex-direction:column; }
.post-simple-item {
  display:grid; grid-template-columns:130px 1fr;
  gap:20px; padding:14px 0; border-bottom:1px solid var(--line);
  align-items:baseline; transition:padding-left .2s;
}
.post-simple-item:hover { padding-left:6px; }
.post-simple-date { font-family:var(--mono); font-size:10px; color:var(--ink4); flex-shrink:0; }
.post-simple-title { font-family:var(--serif); font-size:18px; color:var(--ink); transition:color .2s; }
.post-simple-item:hover .post-simple-title { color:var(--rust); }
.post-simple-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; grid-column:2; }

/* ============================================================
   PAGE HERO (archive, tags, categories pages)
   ============================================================ */
.page-container { min-height:calc(100vh - 60px); }
.page-hero {
  padding:80px 48px 48px;
  border-bottom:1px solid var(--line);
}
.page-hero-label {
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink3);
  display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.page-hero-label::before { content:''; width:20px; height:1px; background:var(--rust); }
.page-hero-h1 {
  font-family:var(--serif); font-size:clamp(44px,6vw,80px);
  font-weight:400; line-height:.95; letter-spacing:-.02em;
  color:var(--ink); margin-bottom:16px;
}
.page-hero-h1 em { font-style:italic; color:var(--rust); }
.page-hero-desc { font-size:14px; line-height:1.85; color:var(--ink3); max-width:560px; }

/* page title for generic pages */
.page-title { margin-bottom:8px; }

/* ============================================================
   ERROR PAGE  (404 + generic)
   ============================================================ */
.error-page {
  position:relative; display:flex; align-items:center;
  justify-content:center; min-height:calc(100vh - 140px);
  padding:48px 24px; overflow:hidden; text-align:center;
}

/* ghost number behind everything */
.error-ghost {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-54%);
  font-family:var(--serif); font-size:clamp(160px,28vw,320px);
  font-weight:400; line-height:1; color:var(--line);
  opacity:.35; pointer-events:none; user-select:none;
  transition:color .3s, opacity .3s; white-space:nowrap;
}

.error-inner {
  position:relative; z-index:1; max-width:480px;
}

/* "Page not found" heading */
.error-label {
  font-family:var(--serif); font-size:clamp(28px,5vw,48px);
  font-weight:400; font-style:italic; color:var(--ink);
  margin-bottom:12px; transition:color .3s;
}

/* path pill */
.error-path {
  display:none; font-family:var(--mono); font-size:11px;
  letter-spacing:.06em; color:var(--rust);
  background:rgba(224,120,72,.08); border:1px solid rgba(224,120,72,.22);
  padding:4px 12px; margin:0 auto 20px; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:background .3s, border-color .3s;
}

.error-desc {
  font-size:15px; line-height:1.75; color:var(--ink3);
  margin-bottom:36px; transition:color .3s;
}

.error-actions {
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:12px;
}

.error-btn-primary {
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--bg); background:var(--rust);
  padding:12px 28px; border:1px solid var(--rust); transition:all .2s;
}
.error-btn-primary:hover { background:var(--ink); border-color:var(--ink); }

.error-btn-secondary {
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink3);
  background:transparent; padding:12px 28px;
  border:1px solid var(--line); transition:all .2s;
}
.error-btn-secondary:hover { color:var(--ink); border-color:var(--ink3); }

/* ============================================================
   SEARCH OVERLAY
   ============================================================ */

/* nav search button */
.nav-search-btn {
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; padding:6px;
  color:var(--ink3); transition:color .2s;
}
.nav-search-btn:hover { color:var(--rust); }

/* overlay wrapper */
.search-overlay {
  position:fixed; inset:0; z-index:900;
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:clamp(48px,8vh,120px);
  pointer-events:none; visibility:hidden;
}
.search-overlay.open {
  pointer-events:auto; visibility:visible;
}

/* blurred dark backdrop */
.search-backdrop {
  position:absolute; inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .25s var(--ease);
}
.search-overlay.open .search-backdrop { opacity:1; }

/* modal card */
.search-modal {
  position:relative; z-index:1;
  width:min(680px,calc(100vw - 32px));
  background:var(--bg2); border:1px solid var(--line);
  box-shadow:0 24px 80px rgba(0,0,0,.5);
  transform:translateY(-16px); opacity:0;
  transition:transform .28s var(--ease), opacity .28s var(--ease);
}
.search-overlay.open .search-modal {
  transform:translateY(0); opacity:1;
}

/* input row */
.search-header { border-bottom:1px solid var(--line); transition:border-color .3s; }
.search-input-wrap {
  display:flex; align-items:center; gap:14px; padding:18px 22px;
}
.search-field-icon { flex-shrink:0; color:var(--ink4); }
.search-input {
  flex:1; background:none; border:none; outline:none;
  font-family:var(--serif); font-size:clamp(18px,2.2vw,24px);
  color:var(--ink); caret-color:var(--rust);
}
.search-input::placeholder { color:var(--ink4); }
/* hide browser's native clear button */
.search-input::-webkit-search-cancel-button { display:none; }
.search-esc-kbd {
  font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  color:var(--ink4); border:1px solid var(--line);
  padding:3px 7px; flex-shrink:0; cursor:pointer;
  transition:color .2s, border-color .2s;
}
.search-esc-kbd:hover { color:var(--ink3); border-color:var(--ink3); }

/* body */
.search-body { max-height:min(480px,50vh); overflow-y:auto; }

/* idle state */
.search-idle { padding:28px 22px; }
.search-idle-hint {
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink4); margin-bottom:16px;
}
.search-shortcuts { display:flex; flex-wrap:wrap; gap:8px 20px; }
.search-sc { font-family:var(--mono); font-size:10px; color:var(--ink4); display:flex; align-items:center; gap:5px; }
.search-sc kbd {
  font-family:var(--mono); font-size:9px;
  border:1px solid var(--line); padding:2px 6px; color:var(--ink3);
}

/* results list */
.search-results { list-style:none; margin:0; padding:8px 0; }
.search-result-item {
  display:grid; grid-template-columns:1fr auto;
  gap:4px 16px; align-items:start;
  padding:14px 22px; cursor:pointer;
  border-left:2px solid transparent;
  transition:background .15s, border-color .15s;
}
.search-result-item:hover,
.search-result-item.is-active {
  background:var(--bg3); border-left-color:var(--rust);
}
.search-result-title {
  font-family:var(--serif); font-size:17px; color:var(--ink);
  line-height:1.25; grid-column:1;
}
.search-result-meta {
  font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink4);
  grid-column:2; white-space:nowrap; padding-top:3px;
}
.search-result-excerpt {
  font-size:13px; line-height:1.65; color:var(--ink3);
  grid-column:1 / -1; margin-top:4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* highlighted match term */
.search-hl { color:var(--rust); font-style:normal; background:rgba(224,120,72,.12); }

/* no results */
.search-no-results {
  padding:32px 22px;
  font-family:var(--serif); font-size:17px;
  color:var(--ink3); font-style:italic;
}
.search-no-results em { color:var(--rust); }

/* scrollbar inside results */
.search-body::-webkit-scrollbar { width:4px; }
.search-body::-webkit-scrollbar-track { background:transparent; }
.search-body::-webkit-scrollbar-thumb { background:var(--line); }

@media (max-width:640px) {
  .search-overlay { padding-top:0; align-items:flex-end; }
  .search-modal { width:100%; border-left:none; border-right:none; border-bottom:none; }
  .search-body { max-height:60vh; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  border-top:1px solid var(--line); padding:22px 48px;
  background:var(--bg2);
}
.footer-inner {
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
}
.footer-logo { font-family:var(--serif); font-size:16px; color:var(--ink); }
.footer-links { display:flex; gap:20px; align-items:center; }
.footer-link {
  font-family:var(--mono); font-size:11px; color:var(--ink3);
  transition:color .2s;
}
.footer-link:hover { color:var(--rust); }
.footer-copy { font-family:var(--mono); font-size:9px; color:var(--ink4); }
.footer-runtime { font-family:var(--mono); font-size:10px; color:var(--ink4); }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.rv { opacity:0; transform:translateY(28px); transition:opacity .75s var(--ease),transform .75s var(--ease); }
.rv.on { opacity:1; transform:translateY(0); }
.rv.d1 { transition-delay:.08s; }
.rv.d2 { transition-delay:.16s; }
.rv.d3 { transition-delay:.24s; }
.rv.d4 { transition-delay:.32s; }

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes slideUp { to { transform:translateY(0); } }
@keyframes fadeUp  { to { opacity:1; transform:translateY(0); } }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ── Tablet landscape ≤1024px ─────────────────────────────── */
@media (max-width:1024px) {
  .nav { padding:0 32px; }
  .blog-index { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .posts-main { border-right:none; }
  .hero { padding:100px 32px 0; }
  .hero-inner { grid-template-columns:1fr; gap:24px; }
  .hero-feat { padding:18px 0; }
  .post-row { padding:24px 32px; }
  .post-row:hover { padding-left:40px; }
  .pagination-wrap { padding:24px 32px; }
  .archive-list { padding:36px 32px; }
  .tag-cloud,.category-list,.posts-simple { padding:36px 32px; }
  .page-hero { padding:80px 32px 40px; }
  .article-layout {
    grid-template-columns:1fr minmax(0,640px) minmax(160px,200px);
    grid-template-areas:". article toc";
    padding:60px 0;
  }
  .article-main { padding:0 24px 0 32px; }
  .toc-rail { padding-left:16px; }
  .site-footer { padding:20px 32px; }
}

/* ── Tablet portrait ≤768px ───────────────────────────────── */
@media (max-width:768px) {
  .nav { padding:0 20px; height:56px; }
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  .site-wrapper { padding-top:56px; }

  .hero { padding:72px 20px 0; }
  .hero-inner { grid-template-columns:1fr; gap:20px; }
  .hero-h1 { font-size:clamp(38px,9vw,64px); }
  .feat-label,.feat-divider { display:none; }

  .post-row { padding:18px 20px; grid-template-columns:36px 1fr; gap:12px; }
  .post-row:hover { padding-left:28px; }
  .post-row-right { display:none; }
  .pagination-wrap { padding:18px 20px; }

  /* Article: block layout, no grid */
  .article-layout { display:block; padding:52px 0 40px; }
  .article-main { padding:0 20px; border-right:none; }
  .toc-rail { display:none; }
  .toc-mobile { display:block; }
  .art-title { font-size:clamp(26px,6.5vw,42px); }
  .art-meta { gap:8px; }
  .art-meta-div { display:none; }
  .code-block { margin-left:-20px; margin-right:-20px; border-left:none; border-right:none; }
  .tag-search-wrap { padding:0 20px; }

  .page-hero { padding:72px 20px 36px; }
  .archive-list { padding:28px 20px; }
  .tag-cloud,.category-list,.posts-simple { padding:28px 20px; }
  .post-simple-item { grid-template-columns:1fr; gap:6px; }
  .post-simple-date { order:-1; }
  .archive-item { grid-template-columns:56px 1fr auto; gap:12px; }
  .archive-item-cat { display:none; }
  .archive-item-arrow { display:none; }
  .tag-index { padding:28px 20px; grid-template-columns:1fr 1fr; gap:28px 24px; }
  .archive-year-num { font-size:36px; }

  .site-footer { padding:16px 20px; flex-direction:column; }
  .footer-inner { flex-direction:column; text-align:center; gap:12px; }
  .footer-links { justify-content:center; }
}

/* ── Mobile ≤480px ────────────────────────────────────────── */
@media (max-width:480px) {
  .nav { padding:0 14px; height:52px; }
  .nav-logo-sub { display:none; }
  .site-wrapper { padding-top:52px; }
  .hero { padding:62px 14px 0; }
  .hero-h1 { font-size:clamp(32px,10vw,48px); }
  .post-row { padding:16px 14px; grid-template-columns:28px 1fr; gap:10px; }
  .post-row:hover { padding-left:20px; }
  .post-title { font-size:18px; }
  .post-tags,.post-excerpt { display:none; }
  .pagination-wrap { padding:14px 14px; }
  .article-main { padding:0 14px; }
  .art-title { font-size:clamp(22px,8vw,34px); }
  .markdown-body { font-size:14px; }
  .code-block { margin-left:-14px; margin-right:-14px; border-left:none; border-right:none; }
  /* pre padding is controlled by .code-body pre — do not override here */
  .tag-search-wrap { padding:0 14px; }
  .page-hero { padding:60px 14px 28px; }
  .archive-list { padding:20px 14px; }
  .tag-cloud,.category-list,.posts-simple { padding:20px 14px; }
  .site-footer { padding:14px 14px; }
  .footer-copy { display:none; }
}

/* ============================================================
   PATCH v2 — Fix icons, responsiveness, empty states, comments
   ============================================================ */

/* ── SVG nav icons ──────────────────────────────────────────── */
.nav-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; flex-shrink:0;
  opacity:.7;
}
.nav-link .nav-icon { width:13px; height:13px; }
.nav-drawer-link .nav-icon { width:15px; height:15px; }
.nav-link:hover .nav-icon,
.nav-link.active .nav-icon,
.nav-drawer-link:hover .nav-icon,
.nav-drawer-link.active .nav-icon { opacity:1; }
.nav-icon svg { width:100%; height:100%; }

/* Footer social icon sizing */
.footer-link { 
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; 
  border:1px solid var(--line); border-radius:50%;
  color:var(--ink3); transition:all .2s;
}
.footer-link:hover { border-color:var(--rust); color:var(--rust); }
.footer-link svg { width:16px; height:16px; }

/* Fix theme toggle sun/moon to use SVG not text */
.icon-sun svg, .icon-moon svg { display:block; }

/* ── Prevent ANY horizontal overflow ────────────────────────── */
/* Use `clip` instead of `hidden` so it doesn't create a scroll
   container that breaks position:sticky on the TOC rail. */
html, body { max-width:100vw; overflow-x:clip; }
.article-layout { overflow-x:clip; }
.markdown-body pre { max-width:100%; }
.markdown-body table { display:block; overflow-x:auto; }
/* code blocks on mobile: bleed to edge */
@media (max-width:480px) {
  .code-block {
    margin-left:-14px !important;
    margin-right:-14px !important;
    border-left:none !important;
    border-right:none !important;
  }
}

/* ── Empty state (no tags/categories yet) ───────────────────── */
.empty-state {
  padding:48px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.empty-state p { font-size:14px; color:var(--ink3); }
.empty-state code {
  font-family:var(--mono); font-size:12px; line-height:1.8;
  background:var(--bg3); border:1px solid var(--line);
  padding:12px 20px; display:block; text-align:left;
  white-space:pre; color:var(--rust);
}

/* ── Category icon ──────────────────────────────────────────── */
.category-icon {
  display:inline-flex; align-items:center; color:var(--rust); flex-shrink:0;
}
.post-simple-cat {
  font-family:var(--mono); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--rust); flex-shrink:0;
}

/* ── Comment form (built-in fallback) ───────────────────────── */
.comment-form { display:flex; flex-direction:column; gap:14px; margin-bottom:40px; }
.comment-form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.comment-input {
  font-family:var(--sans); font-size:13px; color:var(--ink);
  background:var(--bg2); border:1px solid var(--line);
  padding:11px 14px; outline:none; width:100%;
  transition:border-color .2s,background .35s,color .35s;
}
.comment-input:focus { border-color:var(--rust); }
.comment-input::placeholder { color:var(--ink4); }
textarea.comment-input { resize:vertical; min-height:110px; font-family:var(--sans); }
.comment-submit {
  font-family:var(--sans); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bg);
  background:var(--rust); border:1px solid var(--rust);
  padding:13px 28px; cursor:pointer; align-self:flex-start;
  transition:all .2s;
}
.comment-submit:hover { background:var(--ink); border-color:var(--ink); }
.comment-list { display:flex; flex-direction:column; }
.comment-item { padding:24px 0; border-bottom:1px solid var(--line); }
.comment-item:first-child { border-top:1px solid var(--line); }
.comment-meta { display:flex; align-items:baseline; gap:14px; margin-bottom:10px; }
.comment-author { font-family:var(--serif); font-size:16px; color:var(--ink); }
.comment-when { font-family:var(--mono); font-size:9px; color:var(--ink4); }
.comment-text { font-size:14px; line-height:1.75; color:var(--ink2); }
.comment-empty { font-family:var(--serif); font-size:17px; font-style:italic; color:var(--ink3); padding:24px 0; }
@media (max-width:640px) { .comment-form-row { grid-template-columns:1fr; } }


/* ── Article layout extra safety ────────────────────────────── */
@media (max-width:1024px) {
  .article-layout {
    /* No gutter column — simpler 2-col: article + toc */
    grid-template-columns: minmax(0,1fr) minmax(160px,200px) !important;
    grid-template-areas: "article toc" !important;
  }
  .article-main { padding:0 20px 0 32px !important; }
}
@media (max-width:768px) {
  .article-layout { display:block !important; }
  .toc-rail { display:none !important; }
  .toc-mobile { display:block !important; }
  .article-main { padding:0 20px !important; border-right:none !important; }
  .comment-form-row { grid-template-columns:1fr !important; }
}

/* Ensure TOC toc() output is styled */
.toc-list { list-style:none; padding:0; }
.toc-list li { padding:0; }
.toc-list .toc-child { padding-left:12px; }
.toc-list a {
  display:block; padding:5px 10px;
  font-size:11.5px; line-height:1.4; color:var(--ink3);
  border-left:2px solid var(--line);
  transition:color .2s,border-color .2s,background .2s;
}
.toc-list a:hover { color:var(--ink); border-left-color:var(--ink4); }
.toc-list .is-active-link {
  color:var(--rust) !important; border-left-color:var(--rust) !important;
  background:var(--toc-hl); font-weight:500;
}

/* ── About page (Markdown-rendered portfolio) ───────────────── */
.about-hero-md {
  padding:48px 0 40px; border-bottom:1px solid var(--line); margin-bottom:40px;
}
.about-eyebrow-md {
  display:flex; align-items:center; gap:10px; margin-bottom:16px;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink3);
}
.about-dot {
  width:6px; height:6px; border-radius:50%; background:var(--rust);
  display:inline-block; animation:pulse 2s infinite;
}
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(192,90,48,.4)} 50%{box-shadow:0 0 0 8px rgba(192,90,48,0)} }
.about-name-md {
  font-family:var(--serif); font-size:clamp(44px,7vw,80px);
  font-weight:400; line-height:.95; letter-spacing:-.025em;
  color:var(--ink); margin-bottom:12px;
}
.about-name-md em { font-style:italic; color:var(--rust); }
.about-tagline-md { font-size:15px; color:var(--ink3); margin-bottom:24px; }
.about-links-md { display:flex; flex-wrap:wrap; gap:10px; }
.about-btn-md {
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rust);
  border:1px solid rgba(192,90,48,.3); padding:8px 16px; transition:all .2s;
}
.about-btn-md:hover { background:var(--rust); color:var(--bg); border-color:var(--rust); }

/* Override markdown-body tables inside about page to look editorial */
.article-main .markdown-body table {
  font-size:13px; width:100%;
}
.article-main .markdown-body th {
  background:var(--bg2); font-weight:500;
}
.article-main .markdown-body td a {
  color:var(--rust); border-bottom:1px solid rgba(192,90,48,.3);
}

/* ============================================================
   ABOUT PAGE — full portfolio layout
   (used by source/about/index.md with layout: about)
   ============================================================ */

/* Hero strip */
.about-hero { padding:100px 48px 60px; border-bottom:1px solid var(--line); transition:border-color .3s; }
.about-eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.about-eyebrow span { font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink3); }
.about-eyebrow-dot { width:4px; height:4px; border-radius:50%; background:var(--rust); animation:aboutPulse 2s infinite; }
@keyframes aboutPulse { 0%,100%{box-shadow:0 0 0 0 rgba(192,90,48,.4)} 50%{box-shadow:0 0 0 8px rgba(192,90,48,0)} }
.about-h1 { font-family:var(--serif); font-size:clamp(52px,7vw,100px); font-weight:400; line-height:.92; letter-spacing:-.025em; color:var(--ink); transition:color .3s; }
.about-h1 em { font-style:italic; color:var(--rust); }
/* name reveal — same mechanic as hero-h1 */
.about-h1 .ln { display:block; overflow:hidden; }
.about-h1 .ln span { display:block; transform:translateY(110%); animation:slideUp 1s var(--ease) forwards; }
.about-h1 .ln:nth-child(1) span { animation-delay:.18s; }
.about-h1 .ln:nth-child(2) span { animation-delay:.34s; }
/* eyebrow fades in just before name */
.about-eyebrow-reveal { opacity:0; animation:fadeUp .6s var(--ease) .08s forwards; }
/* hero-bottom content fades in after name */
.about-hero-bottom-reveal { opacity:0; animation:fadeUp .7s var(--ease) .55s forwards; }
.about-hero-bottom { display:grid; grid-template-columns:1fr 1fr; gap:60px; margin-top:48px; align-items:end; }
.about-title-block { font-family:var(--serif); font-size:19px; font-style:italic; color:var(--ink3); margin-bottom:20px; transition:color .3s; }
.about-desc { font-size:14px; line-height:1.9; color:var(--ink2); transition:color .3s; }
.about-desc p { margin-bottom:16px; }
.about-desc p:last-child { margin-bottom:0; }
.about-desc strong { font-weight:500; color:var(--ink); }
.about-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.about-link-btn { font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--rust); border:1px solid rgba(192,90,48,.3); padding:8px 16px; transition:all .2s; }
.about-link-btn:hover { background:var(--rust); color:var(--bg); border-color:var(--rust); }

/* CTF Teams strip */
.about-ctf-teams { margin-top:36px; padding-top:28px; border-top:1px solid var(--line); transition:border-color .3s; }
.about-ctf-label { font-family:var(--mono); font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink4); margin-bottom:12px; transition:color .3s; }
.about-ctf-names { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; }
.about-ctf-name { font-family:var(--serif); font-size:clamp(26px,3.2vw,40px); font-weight:400; font-style:italic; color:var(--ink); line-height:1; transition:color .3s; }
.about-ctf-sep { font-family:var(--serif); font-size:clamp(18px,2vw,26px); color:var(--rust); line-height:1; flex-shrink:0; }

/* About sections */
.about-section { padding:80px 48px; border-bottom:1px solid var(--line); transition:border-color .3s; }
.about-section:last-of-type { border-bottom:none; }
.about-sec-hdr { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:48px; }
.about-sec-label { font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink3); display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.about-sec-label::before { content:''; width:20px; height:1px; background:var(--rust); }
.about-sec-h2 { font-family:var(--serif); font-size:clamp(36px,4.5vw,56px); font-weight:400; line-height:1.0; letter-spacing:-.02em; color:var(--ink); transition:color .3s; }
.about-sec-h2 em { font-style:italic; color:var(--rust); }
.about-sec-count { font-family:var(--serif); font-size:72px; font-weight:400; color:var(--line); line-height:1; transition:color .3s; }

/* Skills 2-col grid */
.skills-2col { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.skill-block-label { font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink3); margin-bottom:14px; }
.skill-list { list-style:none; padding:0; }
.skill-list li { font-family:var(--serif); font-size:17px; line-height:1; padding:10px 0; border-bottom:1px solid var(--line); color:var(--ink2); display:flex; align-items:center; gap:10px; transition:color .2s,padding-left .2s,border-color .3s; }
.skill-list li::before { content:''; width:4px; height:4px; border-radius:50%; background:var(--rust); flex-shrink:0; }
.skill-list li:hover { color:var(--ink); padding-left:6px; }
.skill-list li:last-child { border-bottom:none; }

/* Experience rows */
.exp-list { display:flex; flex-direction:column; }
.exp-item { display:grid; grid-template-columns:180px 1fr 140px; gap:40px; padding:36px 0; border-top:1px solid var(--line); align-items:start; position:relative; transition:padding-left .3s var(--ease),border-color .3s; }
.exp-item::after { content:''; position:absolute; inset:0 -48px; background:var(--bg2); opacity:0; transition:opacity .3s; z-index:-1; }
.exp-item:hover { padding-left:16px; }
.exp-item:hover::after { opacity:1; }
.exp-period { font-family:var(--mono); font-size:11px; color:var(--ink3); padding-top:6px; letter-spacing:.06em; }
.exp-role { font-family:var(--serif); font-size:24px; color:var(--ink); margin-bottom:4px; line-height:1.1; transition:color .3s; }
.exp-company { font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--rust); margin-bottom:16px; }
.exp-pts { list-style:none; padding:0; }
.exp-pts li { font-size:13px; line-height:1.7; color:var(--ink2); padding:4px 0 4px 16px; position:relative; }
.exp-pts li::before { content:'—'; position:absolute; left:0; color:var(--ink4); }
.exp-badge { font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); text-align:right; padding-top:6px; }

/* Achievement dark section */
.ach-dark { background:var(--ink); padding:80px 48px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .3s; }
[data-theme="dark"] .ach-dark { background:var(--bg2); }
.ach-dark-label { font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink4); display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.ach-dark-label::before { content:''; width:20px; height:1px; background:var(--rust); }
.ach-dark-h2 { font-family:var(--serif); font-size:clamp(36px,4.5vw,60px); color:var(--bg); font-weight:400; letter-spacing:-.02em; margin-bottom:56px; transition:color .3s; }
[data-theme="dark"] .ach-dark-h2 { color:var(--ink); }
.ach-dark-h2 em { font-style:italic; color:var(--rust); }
.ach-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.08); }
/* 6-card grid: 2 rows of 3, row 2 cards get a top border as separator */
.ach-grid-6 { grid-template-columns:repeat(3,1fr); }
.ach-grid-6 .ach-card:nth-child(n+4) { border-top:1px solid rgba(255,255,255,.08); }
[data-theme="dark"] .ach-grid { border-top-color:var(--line); }
.ach-card { padding:44px 32px; border-right:1px solid rgba(255,255,255,.08); position:relative; transition:background .3s; }
[data-theme="dark"] .ach-card { border-right-color:var(--line); }
.ach-card:last-child { border-right:none; }
.ach-card:hover { background:rgba(255,255,255,.04); }
[data-theme="dark"] .ach-card:hover { background:var(--bg3); }
.ach-big-num { font-family:var(--serif); font-size:88px; line-height:.85; color:rgba(255,255,255,.08); margin-bottom:16px; transition:color .3s; }
[data-theme="dark"] .ach-big-num { color:var(--line); }
.ach-card:hover .ach-big-num { color:var(--rust); }
.ach-event-name { font-family:var(--serif); font-size:18px; color:var(--bg); line-height:1.2; margin-bottom:6px; transition:color .3s; }
[data-theme="dark"] .ach-event-name { color:var(--ink); }
.ach-event-det { font-family:var(--mono); font-size:11px; color:rgba(255,255,255,.35); line-height:1.55; transition:color .3s; }
[data-theme="dark"] .ach-event-det { color:var(--ink3); }
.ach-pill { position:absolute; top:20px; right:20px; font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--rust); background:rgba(192,90,48,.15); border:1px solid rgba(192,90,48,.25); padding:3px 9px; }

/* Achievement highlight variant */
.ach-card.highlight { border-top:2px solid var(--rust); background:rgba(192,90,48,.06); }
.ach-card.highlight:hover { background:rgba(192,90,48,.12); }
.ach-card.highlight .ach-big-num { color:rgba(192,90,48,.14); }
.ach-card.highlight:hover .ach-big-num { color:var(--rust); }
[data-theme="dark"] .ach-card.highlight { background:rgba(192,90,48,.08); }

/* Ranking table (inside ach-dark) */
.rank-section { border-top:1px solid rgba(255,255,255,.06); padding:52px 48px; display:grid; grid-template-columns:280px 1fr; gap:64px; align-items:start; background:rgba(0,0,0,.25); }
[data-theme="dark"] .rank-section { background:var(--bg2); border-top-color:var(--line); }
.rank-section + .rank-section { border-top:1px solid rgba(255,255,255,.04); }
[data-theme="dark"] .rank-section + .rank-section { border-top-color:var(--line); }
.rank-section-label { font-family:var(--mono); font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:8px; transition:color .3s; }
[data-theme="dark"] .rank-section-label { color:var(--ink4); }
.rank-section-title { font-family:var(--serif); font-size:28px; font-weight:400; color:var(--bg); line-height:1.1; transition:color .3s; }
[data-theme="dark"] .rank-section-title { color:var(--ink); }
.rank-section-title em { font-style:italic; color:var(--rust); }
.rank-table { display:flex; flex-direction:column; border-top:1px solid rgba(255,255,255,.08); }
[data-theme="dark"] .rank-table { border-top-color:var(--line); }
.rank-row { display:grid; grid-template-columns:48px 1fr auto; gap:24px; align-items:baseline; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.05); transition:background .2s; }
[data-theme="dark"] .rank-row { border-bottom-color:var(--line); }
.rank-year { font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:rgba(255,255,255,.3); padding-top:2px; transition:color .3s; }
[data-theme="dark"] .rank-year { color:var(--ink3); }
.rank-context { font-size:13px; line-height:1.5; color:rgba(255,255,255,.45); transition:color .3s; }
[data-theme="dark"] .rank-context { color:var(--ink3); }
.rank-num { font-family:var(--serif); font-size:32px; font-weight:400; color:var(--bg); line-height:1; text-align:right; white-space:nowrap; transition:color .3s; }
[data-theme="dark"] .rank-num { color:var(--ink); }
.rank-num span { font-family:var(--mono); font-size:11px; color:rgba(255,255,255,.3); margin-left:4px; vertical-align:middle; }
[data-theme="dark"] .rank-num span { color:var(--ink3); }
.rank-arrow-up { color:var(--rust); font-size:11px; margin-left:6px; }

/* Small achievement grid */
.ach-sm-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.08); }
[data-theme="dark"] .ach-sm-grid { border-top-color:var(--line); }
.ach-sm-card { padding:32px 24px; border-right:1px solid rgba(255,255,255,.08); transition:background .3s; }
[data-theme="dark"] .ach-sm-card { border-right-color:var(--line); }
.ach-sm-card:last-child { border-right:none; }
.ach-sm-card:hover { background:rgba(255,255,255,.04); }
[data-theme="dark"] .ach-sm-card:hover { background:var(--bg3); }
.ach-sm-num { font-family:var(--serif); font-size:44px; color:rgba(255,255,255,.08); line-height:1; margin-bottom:10px; transition:color .3s; }
[data-theme="dark"] .ach-sm-num { color:var(--line); }
.ach-sm-card:hover .ach-sm-num { color:var(--rust); }
.ach-sm-name { font-family:var(--serif); font-size:14px; color:var(--bg); line-height:1.25; margin-bottom:4px; transition:color .3s; }
[data-theme="dark"] .ach-sm-name { color:var(--ink); }
.ach-sm-det { font-family:var(--mono); font-size:10px; color:rgba(255,255,255,.35); line-height:1.5; }
[data-theme="dark"] .ach-sm-det { color:var(--ink3); }
.ach-sm-card.highlight { border-top:2px solid var(--rust); }
.ach-sm-card.highlight .ach-sm-num { color:rgba(192,90,48,.14); }
.ach-sm-card.highlight:hover .ach-sm-num { color:var(--rust); }

/* Certifications */
.cert-list { display:flex; flex-direction:column; }
.cert-row { display:grid; grid-template-columns:52px 1fr auto; gap:28px; align-items:center; padding:22px 0; border-top:1px solid var(--line); position:relative; transition:padding-left .25s var(--ease),border-color .3s; }
.cert-row::after { content:''; position:absolute; inset:0 -48px; background:var(--bg2); opacity:0; transition:opacity .25s; z-index:-1; }
.cert-row:hover { padding-left:10px; }
.cert-row:hover::after { opacity:1; }
.cert-idx { font-family:var(--serif); font-size:13px; color:var(--ink4); }
.cert-nm { font-family:var(--serif); font-size:20px; color:var(--ink); transition:color .3s; }
.cert-meta { font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); text-align:right; }
a.cert-row { text-decoration:none; color:inherit; display:grid; }
a.cert-row:hover .cert-nm { color:var(--rust); }
.cert-link-arrow { font-family:var(--mono); font-size:11px; color:var(--rust); opacity:0; transition:opacity .2s,transform .2s; white-space:nowrap; }
a.cert-row:hover .cert-link-arrow { opacity:1; transform:translateX(3px); }

/* ── Speaking Engagements ────────────────────────────────── */
.speak-list { display:flex; flex-direction:column; }
.speak-item {
  display:grid; grid-template-columns:52px 1fr auto;
  gap:28px; align-items:start; padding:26px 0;
  border-top:1px solid var(--line); position:relative;
  transition:padding-left .25s var(--ease),border-color .3s;
}
.speak-item::after {
  content:''; position:absolute; inset:0 -48px;
  background:var(--bg2); opacity:0;
  transition:opacity .25s; z-index:-1;
}
.speak-item:hover { padding-left:10px; }
.speak-item:hover::after { opacity:1; }
.speak-idx { font-family:var(--serif); font-size:13px; color:var(--ink4); padding-top:4px; }
.speak-body { display:flex; flex-direction:column; gap:8px; }
.speak-event {
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rust);
}
.speak-event-ctx {
  font-family:var(--mono); font-size:9px; letter-spacing:.06em;
  text-transform:none; color:var(--ink4);
}
.speak-title {
  font-family:var(--serif); font-size:clamp(16px,1.6vw,20px);
  font-style:italic; color:var(--ink); line-height:1.3;
  transition:color .3s;
}
.speak-slides { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.speak-slide-btn {
  font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink3);
  border:1px solid var(--line); padding:4px 10px;
  transition:color .2s,border-color .2s,background .2s;
  white-space:nowrap;
}
.speak-slide-btn:hover { color:var(--rust); border-color:var(--rust); background:rgba(224,120,72,.05); }
.speak-badge {
  font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink4);
  white-space:nowrap; padding-top:4px;
}
@media (max-width:640px) {
  .speak-item { grid-template-columns:36px 1fr; gap:14px; }
  .speak-item::after { inset:0 -20px; }
  .speak-badge { display:none; }
}

/* Contact strip */
.about-contact { padding:80px 48px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:64px; transition:border-color .3s; }
.about-contact-h { font-family:var(--serif); font-size:clamp(40px,5vw,72px); color:var(--ink); line-height:.95; letter-spacing:-.02em; margin-top:24px; margin-bottom:32px; transition:color .3s; }
.about-contact-h em { font-style:italic; color:var(--rust); }
.about-contact-sub { font-size:14px; line-height:1.8; color:var(--ink3); }
.contact-links-list { display:flex; flex-direction:column; }
.contact-link-row { display:flex; align-items:center; justify-content:space-between; padding:18px 0; border-top:1px solid var(--line); position:relative; transition:padding-left .22s var(--ease),border-color .3s; }
.contact-link-row:last-child { border-bottom:1px solid var(--line); }
.contact-link-row::after { content:'↗'; position:absolute; right:0; font-family:var(--serif); font-size:18px; color:var(--rust); opacity:0; transform:translate(-4px,4px); transition:all .22s; }
.contact-link-row:hover { padding-left:8px; }
.contact-link-row:hover::after { opacity:1; transform:translate(0,0); }
.cl-lbl { font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink3); }
.cl-val { font-family:var(--serif); font-size:18px; color:var(--ink); transition:color .2s; }
.contact-link-row:hover .cl-val { color:var(--rust); }

/* About — responsive */
@media (max-width:1024px) {
  .about-hero,.about-section,.ach-dark,.about-contact { padding-left:32px; padding-right:32px; }
  .about-hero-bottom { grid-template-columns:1fr; gap:28px; }
  .about-contact { grid-template-columns:1fr; gap:40px; padding-top:60px; padding-bottom:60px; }
  .skills-2col { grid-template-columns:1fr; gap:28px; }
  .ach-grid { grid-template-columns:1fr 1fr; }
  .ach-sm-grid { grid-template-columns:1fr 1fr !important; }
  .rank-section { grid-template-columns:1fr; gap:28px; padding:40px 32px; }
  .exp-item { grid-template-columns:1fr; gap:8px; }
  .exp-badge { text-align:left; }
  .exp-item::after { inset:0 -32px; }
  .cert-row::after { inset:0 -32px; }
}
@media (max-width:768px) {
  .about-hero { padding:76px 20px 40px; }
  .about-section { padding:48px 20px; }
  .about-h1 { font-size:clamp(44px,10vw,72px); }
  .about-sec-hdr { flex-direction:column; gap:8px; align-items:flex-start; }
  .about-sec-count { font-size:44px; }
  .skills-2col { grid-template-columns:1fr; gap:20px; }
  .exp-item { grid-template-columns:1fr; gap:6px; padding:28px 0; }
  .exp-item::after { inset:0 -20px; }
  .cert-row { grid-template-columns:36px 1fr; gap:14px; }
  .cert-row::after { inset:0 -20px; }
  a.cert-row { grid-template-columns:36px 1fr; gap:14px; }
  .ach-dark { padding:48px 20px; }
  .ach-grid { grid-template-columns:1fr; }
  .ach-card { border-right:none; border-bottom:1px solid rgba(255,255,255,.08); padding:28px 20px; }
  .ach-big-num { font-size:72px; }
  .ach-sm-grid { grid-template-columns:1fr 1fr !important; }
  .ach-sm-card { border-right:none; border-bottom:1px solid rgba(255,255,255,.08); padding:20px 16px; }
  .rank-section { grid-template-columns:1fr; gap:20px; padding:28px 20px; }
  .rank-num { font-size:24px; }
  .about-contact { padding:48px 20px; grid-template-columns:1fr; gap:32px; }
  .contact-link-row { padding:14px 0; }
  .cl-val { font-size:15px; }
}
@media (max-width:480px) {
  .about-hero { padding:60px 14px 28px; }
  .about-h1 { font-size:clamp(38px,10vw,60px); }
  .about-section { padding:36px 14px; }
  .ach-dark { padding:36px 14px; }
  .ach-big-num { font-size:60px; }
  .ach-card { padding:24px 14px; }
  .rank-section { padding:24px 14px; }
  .ach-sm-grid { grid-template-columns:1fr !important; }
  .about-contact { padding:36px 14px; }
  .cl-val { font-size:14px; }
}

/* ============================================================
   HEXO HIGHLIGHT.JS CODE BLOCKS
   Hexo wraps code in <figure class="highlight lang"> with a
   table layout (gutter + code columns).  The generic
   .markdown-body pre rules must be reset inside figures so
   only the figure itself carries the dark-box appearance.
   ============================================================ */
.markdown-body figure.highlight {
  background:var(--pre-bg);
  border:1px solid var(--line);
  margin:24px 0;
  overflow-x:auto;
  position:relative;
  transition:background .3s,border-color .3s;
}
/* Kill the generic pre styles that would create a double-box */
.markdown-body figure.highlight pre {
  background:none !important;
  border:none !important;
  padding:0 !important;
  margin:0 !important;
  overflow:visible;
  display:block;
}
.markdown-body figure.highlight table {
  width:100%; border-collapse:collapse; margin:0; display:table;
}
.markdown-body figure.highlight td {
  padding:0; border:none; background:none; vertical-align:top;
}
/* Gutter — line numbers */
.markdown-body figure.highlight td.gutter {
  width:1%; white-space:nowrap; user-select:none;
  border-right:1px solid rgba(255,255,255,.07);
}
[data-theme="light"] .markdown-body figure.highlight td.gutter {
  border-right-color:rgba(0,0,0,.07);
}
.markdown-body figure.highlight td.gutter pre {
  padding:20px 12px 20px 16px !important;
  color:var(--ink4) !important;
  font-size:12px !important;
  line-height:1.7 !important;
  text-align:right;
}
/* Code column */
.markdown-body figure.highlight td.code pre {
  padding:20px 22px !important;
  font-size:13px !important;
  line-height:1.7 !important;
  white-space:pre;
  color:var(--pre-txt);
}
.markdown-body figure.highlight td.code pre code {
  color:inherit;
  font-size:inherit;
  line-height:inherit;
  background:none;
  border:none;
  padding:0;
}
/* Each line wrapper Hexo emits */
.markdown-body figure.highlight .line { display:inline-block; }

/* Code-copy button position: on the figure, not the pre */
.markdown-body figure.highlight { position:relative; }

/* Mobile — bleed figures edge-to-edge just like plain pre */
@media (max-width:768px) {
  .markdown-body figure.highlight {
    margin-left:-20px !important; margin-right:-20px !important;
    border-left:none !important; border-right:none !important;
  }
}
@media (max-width:480px) {
  .markdown-body figure.highlight {
    margin-left:-14px !important; margin-right:-14px !important;
  }
}