/* ============================================================
   WRITEUPS — long-form reading layer, in the PANTHEON aesthetic.
   Self-contained (own fonts + palette); loaded after login.css so
   it wins on conflicts. Matrix rain bg comes from .background + matrix.js.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Chakra+Petch:wght@400;500;700&display=swap");

:root{
  --green:#2bff88; --neon:#46ffa0; --bg:#04050b;
  --ink:#e7e9f3; --mute:rgba(231,233,243,.56); --faint:rgba(231,233,243,.34);
  --hair:rgba(70,255,160,.18);
  --fontD:'Cinzel',serif; --fontT:'Chakra Petch',sans-serif; --fontM:'Courier New',monospace;
}
body{background:var(--bg);color:var(--ink);font-family:var(--fontT);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(120% 80% at 50% -10%,rgba(43,255,136,.06),transparent 60%),
    radial-gradient(80% 60% at 50% 120%,rgba(2,3,10,.9),transparent 60%)}
/* match the Sanctum chrome: same #rain canvas (rain.js) + veil + scanlines */
.background{display:none!important}
#rain{position:fixed;inset:0;z-index:0;opacity:.10;pointer-events:none;mix-blend-mode:screen}
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 92% at 50% 30%,transparent 42%,rgba(2,3,10,.72) 100%)}
body::after{content:"";position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.04;
  background:repeating-linear-gradient(0deg,#000 0 1px,transparent 1px 3px)}

.blog-wrap{position:relative;z-index:5;max-width:760px;margin:0 auto;padding:40px 24px 120px}

/* ── top bar ── */
.blog-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:48px;
  font-family:var(--fontM);font-size:12px;letter-spacing:2px;text-transform:uppercase}
.blog-home{color:var(--neon);opacity:.72;transition:opacity .2s,text-shadow .2s}
.blog-home:hover{opacity:1;text-shadow:0 0 10px var(--green)}
.blog-brand{color:var(--faint)}

/* ── index header (Sanctum altar treatment) ── */
.blog-head{margin-bottom:46px;text-align:center}
.blog-head::before{content:"the chronicle";display:block;font-family:var(--fontM);font-size:11px;
  letter-spacing:.55em;text-transform:uppercase;color:var(--neon);opacity:.8;margin-bottom:10px}
.blog-title{font-family:var(--fontD);font-weight:900;font-size:clamp(34px,6vw,56px);letter-spacing:.18em;padding-left:.18em;
  text-transform:uppercase;color:#fff;text-shadow:0 0 16px rgba(43,255,136,.22),0 2px 20px #000;
  -webkit-text-fill-color:#fff;background:none}
.blog-sub{margin:14px auto 0;max-width:600px;color:#aeb5c1;font-size:15px;line-height:1.7}

/* ── post list — holographic tablets (no glassy boxes) ── */
.post-list{display:flex;flex-direction:column;gap:14px}
.post-card{position:relative;display:block;padding:22px 24px 22px 26px;border-radius:14px;
  background:rgba(27,32,43,.92);border:1px solid var(--hair);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
.post-card::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,transparent,var(--green),transparent);box-shadow:0 0 12px var(--green);opacity:.6;transition:opacity .25s}
.post-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--green) 45%,transparent);
  box-shadow:0 12px 34px rgba(0,0,0,.5),0 0 26px rgba(43,255,136,.16)}
.post-card:hover::before{opacity:1}
.post-card .pc-date{font-family:var(--fontM);font-size:11px;letter-spacing:1.5px;color:var(--neon);text-transform:uppercase;opacity:.85}
.post-card .pc-title{margin-top:9px;font-family:var(--fontD);font-weight:700;font-size:20px;letter-spacing:.4px;color:#fff;line-height:1.25}
.post-card .pc-excerpt{margin-top:11px;color:#bcc2cd;font-size:14.5px;line-height:1.66}
.post-card .pc-tags{margin-top:15px;display:flex;flex-wrap:wrap;gap:7px}
.pc-tags span,.post-tags span{font-family:var(--fontM);font-size:10.5px;letter-spacing:.5px;padding:4px 11px;border-radius:20px;
  background:rgba(43,255,136,.06);border:1px solid var(--hair);color:rgba(231,233,243,.72)}

/* ── single post ── */
.post-header{margin-bottom:38px}
.post-header .post-date{font-family:var(--fontM);font-size:12px;letter-spacing:2px;color:var(--neon);text-transform:uppercase}
.post-header h1{margin-top:13px;font-family:var(--fontD);font-weight:900;font-size:clamp(28px,4.4vw,40px);line-height:1.18;
  color:#fff;letter-spacing:.5px;text-shadow:0 0 13px rgba(43,255,136,.16),0 2px 16px #000}
.post-header .post-tags{margin-top:20px;display:flex;flex-wrap:wrap;gap:7px}

.post-body{color:#d2d7e0;font-size:16.5px;line-height:1.82}
.post-body p{margin:0 0 22px}
.post-body .lead{font-size:18.5px;color:#fff;font-weight:500}
.post-body h2{margin:44px 0 16px;font-family:var(--fontD);font-weight:700;font-size:20px;letter-spacing:1.5px;color:#fff;
  padding-bottom:10px;border-bottom:1px solid var(--hair)}
.post-body h2::first-letter{color:var(--green)}
.post-body h3{margin:30px 0 12px;font-size:17px;color:var(--neon);font-weight:700;letter-spacing:.4px}
.post-body a{color:var(--neon);border-bottom:1px dotted rgba(70,255,160,.45);transition:text-shadow .2s}
.post-body a:hover{text-shadow:0 0 8px var(--green)}
.post-body strong{color:#fff}
.post-body em{color:rgba(231,233,243,.92)}
.post-body ul,.post-body ol{margin:0 0 22px;padding-left:24px}
.post-body li{margin-bottom:9px}
.post-body li::marker{color:var(--green)}
.post-body blockquote{margin:0 0 22px;padding:14px 20px;border-left:2px solid var(--green);
  background:rgba(43,255,136,.05);border-radius:0 8px 8px 0;color:var(--mute);font-style:italic}
.post-body code{font-family:var(--fontM);font-size:13.5px;background:rgba(2,4,8,.7);border:1px solid var(--hair);
  padding:2px 7px;border-radius:5px;color:var(--neon)}
.post-body pre{margin:0 0 24px;padding:18px 20px;border-radius:12px;overflow-x:auto;
  background:rgba(2,4,8,.82);border:1px solid var(--hair);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.post-body pre code{background:none;border:0;padding:0;color:rgba(231,233,243,.9);font-size:13.5px;line-height:1.7}

.post-foot{margin-top:56px;padding-top:24px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:14px;font-family:var(--fontM);font-size:12.5px;letter-spacing:1px}
.post-foot a{color:var(--neon)}
.post-foot a:hover{text-shadow:0 0 8px var(--green)}

/* ── comments ── */
.comments{margin-top:58px;padding-top:26px;border-top:1px solid var(--hair)}
.comments-title{font-family:var(--fontD);font-size:16px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#fff;margin-bottom:18px}
.giscus,.giscus-frame{width:100%}

/* ── reading backdrop on post pages (calms the rain behind text) ── */
.blog-wrap.reading{background:linear-gradient(rgba(27,32,43,.93),rgba(27,32,43,.95));
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  border:1px solid var(--hair);border-radius:20px;box-shadow:0 14px 54px rgba(0,0,0,.5);
  padding:42px 44px 80px;margin-top:30px;margin-bottom:64px}

@media (max-width:560px){
  .post-header h1{font-size:25px}
  .blog-title{font-size:30px}
  .post-body{font-size:15.5px}
  .blog-wrap.reading{padding:28px 20px 56px;border-radius:16px;margin-top:16px}
}