/* Blog — listing + post prose. Pairs with /aa_auth/site/style.css */

body{background:#03050a;color:#e5e7eb;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;margin:0}
#particles-js{position:fixed;inset:0;z-index:-1}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(97,218,251,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(97,218,251,.05) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse at 50% -10%,#000 35%,transparent 78%);
  mask-image:radial-gradient(ellipse at 50% -10%,#000 35%,transparent 78%)}

.blog-wrap{max-width:860px;margin:0 auto;padding:60px 20px 96px}
.eyebrow{font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace);font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:#7fd1ff}
.eyebrow::before{content:'// ';opacity:.55}

/* ---- Listing ---- */
.blog-hero{margin-bottom:36px}
.blog-hero h1{font-size:clamp(2.1rem,4.6vw,2.9rem);margin:14px 0 10px;letter-spacing:-.015em;background:linear-gradient(120deg,#fff 30%,#60a5fa);-webkit-background-clip:text;background-clip:text;color:transparent}
.blog-hero p{font-size:1.08rem;line-height:1.6;color:#aeb9cc;max-width:620px;margin:0}

.post-list{display:grid;gap:16px}
.post-card{position:relative;display:block;text-decoration:none;border-radius:3px;padding:22px 24px;
  background:linear-gradient(165deg,rgba(18,26,38,.66),rgba(8,12,20,.66));border:1px solid color-mix(in srgb,var(--acc,#61dafb) 22%,transparent);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.post-card::before,.post-card::after{content:'';position:absolute;width:12px;height:12px;pointer-events:none;opacity:.5;transition:opacity .18s ease,width .18s ease,height .18s ease}
.post-card::before{top:-1px;left:-1px;border-top:2px solid var(--acc,#61dafb);border-left:2px solid var(--acc,#61dafb)}
.post-card::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--acc,#61dafb);border-right:2px solid var(--acc,#61dafb)}
.post-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--acc,#61dafb) 50%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--acc,#61dafb) 25%,transparent),0 16px 40px rgba(2,6,20,.55)}
.post-card:hover::before,.post-card:hover::after{opacity:1;width:16px;height:16px}
.post-meta{font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--acc,#61dafb);margin-bottom:8px;display:flex;flex-wrap:wrap;gap:8px}
.post-meta .dot{opacity:.5}
.post-card h2{margin:0 0 8px;font-size:1.35rem;letter-spacing:-.01em}
.post-card h2 a{color:#f3f6fb;text-decoration:none}
.post-card h2 a:hover{color:var(--acc,#61dafb)}
.post-card p{margin:0 0 14px;color:#aeb9cc;line-height:1.6}
.post-tags{display:flex;flex-wrap:wrap;gap:6px}
.tagchip{font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace);font-size:.7rem;letter-spacing:.02em;color:#bcd4f5;background:rgba(97,218,251,.1);border:1px solid rgba(97,218,251,.28);border-radius:2px;padding:3px 9px}
.read-more{display:inline-flex;align-items:center;gap:7px;color:var(--acc,#61dafb);font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;font-weight:600;text-decoration:none}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:14px}
.card-copy{border:1px solid rgba(97,218,251,.28);border-radius:2px;background:rgba(97,218,251,.06);color:#bcd3e6;cursor:pointer;
  font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace);font-size:.72rem;letter-spacing:.04em;padding:6px 11px;transition:border-color .15s ease,background .15s ease,color .15s ease}
.card-copy:hover{border-color:var(--acc,#61dafb);background:rgba(97,218,251,.12);color:#fff}
.card-copy.copied{border-color:#34d399;background:rgba(52,211,153,.14);color:#a7f3d0}

/* ---- Single post ---- */
.post-wrap{max-width:760px;margin:0 auto;padding:54px 20px 96px}
.post-back{display:inline-flex;align-items:center;gap:7px;color:#9fb0c8;text-decoration:none;font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:24px}
.post-back:hover{color:var(--acc,#61dafb)}
.post-hd{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid rgba(97,218,251,.16)}
.post-hd h1{font-size:clamp(1.9rem,4.2vw,2.7rem);line-height:1.15;margin:12px 0 14px;color:#f4f7fb;letter-spacing:-.02em}
.post-hd .post-meta{font-size:.76rem}
.post-shout{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:8px 14px;border-radius:3px;text-decoration:none;
  background:color-mix(in srgb,var(--acc,#61dafb) 10%,transparent);border:1px solid color-mix(in srgb,var(--acc,#61dafb) 35%,transparent);color:#dbe9fb;font-size:.9rem}
.post-shout strong{color:var(--acc,#61dafb)}
.post-shout:hover{border-color:var(--acc,#61dafb)}

/* ---- Share bar ---- */
.post-share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 28px}
.share-label{font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#7c8aa3;margin-right:2px}
.share-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(97,218,251,.28);border-radius:2px;padding:7px 13px;background:rgba(97,218,251,.06);color:#cfe3f5;text-decoration:none;cursor:pointer;
  font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace);font-size:.74rem;letter-spacing:.04em;transition:border-color .15s ease,background .15s ease,transform .15s ease}
.share-btn:hover{border-color:var(--acc,#61dafb);background:rgba(97,218,251,.12);transform:translateY(-1px)}
.share-btn.copied{border-color:#34d399;background:rgba(52,211,153,.14);color:#a7f3d0}
.foot-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---- Prose ---- */
.post-body{font-size:1.05rem;line-height:1.75;color:#cfd8e6}
.post-body h2{font-size:1.5rem;color:#f3f6fb;margin:2em 0 .6em;letter-spacing:-.01em;position:relative;padding-left:16px}
.post-body h2::before{content:'';position:absolute;left:0;top:.18em;bottom:.18em;width:3px;border-radius:2px;background:linear-gradient(180deg,var(--acc,#61dafb),transparent)}
.post-body p{margin:0 0 1.1em}
.post-body a{color:var(--acc,#61dafb);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--acc,#61dafb) 40%,transparent)}
.post-body a:hover{border-bottom-color:var(--acc,#61dafb)}
.post-body strong{color:#eef4fb}
.post-body em{color:#dbe4f0}
.post-body ul{margin:0 0 1.2em;padding:0;list-style:none}
.post-body ul li{position:relative;padding-left:22px;margin:0 0 .6em}
.post-body ul li::before{content:'';position:absolute;left:3px;top:.72em;width:6px;height:6px;background:var(--acc,#61dafb);box-shadow:0 0 8px color-mix(in srgb,var(--acc,#61dafb) 70%,transparent)}
.post-body :not(pre) > code{font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace);font-size:.88em;color:#a7f3d0;background:rgba(97,218,251,.08);border:1px solid rgba(97,218,251,.2);border-radius:2px;padding:.08em .4em}
.post-body pre{position:relative;background:linear-gradient(165deg,rgba(6,12,22,.92),rgba(2,6,14,.92));border:1px solid rgba(97,218,251,.25);border-radius:3px;padding:18px 18px;overflow:auto;margin:0 0 1.4em}
.post-body pre::before{content:'';position:absolute;top:-1px;left:-1px;width:12px;height:12px;border-top:2px solid var(--acc,#61dafb);border-left:2px solid var(--acc,#61dafb)}
.post-body pre code{font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace);font-size:.84rem;line-height:1.6;color:#9ae6b4;white-space:pre}

/* ---- Foot ---- */
.post-foot{margin-top:40px;padding-top:24px;border-top:1px solid rgba(97,218,251,.16);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.post-foot .tags{display:flex;flex-wrap:wrap;gap:6px}
.blog-btn{border:1px solid rgba(97,218,251,.3);border-radius:2px;padding:9px 16px;color:#dcebff;text-decoration:none;font-family:var(--font-mono,'JetBrains Mono',ui-monospace,monospace);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;display:inline-flex;align-items:center;gap:7px;transition:transform .15s ease,border-color .15s ease,background .15s ease}
.blog-btn:hover{transform:translateY(-1px);border-color:var(--brand,#61dafb);background:rgba(97,218,251,.09)}