/* CYF Tech — blog.html: the blog as a commit log
   hero terminal (git log of every post) → featured post → dated timeline; drafts get a dashed node */

/* ---------- hero terminal ---------- */
@keyframes blLine{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@keyframes blBlink{50%{opacity:0}}
.bl-term{border-radius:14px;border:1px solid var(--line-2);background:rgba(4,8,20,.82);box-shadow:0 30px 60px rgba(0,0,0,.4),0 0 70px var(--accent-faint);overflow:hidden;font-family:var(--mono);font-size:13px}
.bl-bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-bottom:1px solid var(--line-2);background:rgba(8,16,32,.9)}
.bl-bar i{width:10px;height:10px;border-radius:50%;background:var(--line-3)}
.bl-bar i:first-child{background:#F87171}
.bl-bar i:nth-child(2){background:#FBBF24}
.bl-bar i:nth-child(3){background:#4ADE80}
.bl-bar span{margin-left:10px;color:var(--dim);font-size:12px}
.bl-screen{padding:18px 20px 20px;line-height:1.9;color:var(--muted)}
.bl-screen ul{list-style:none;margin:2px 0;padding:0}
.bl-screen li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.bl-screen li,.bl-screen p[style]{opacity:0;animation:blLine .4s ease forwards;animation-delay:calc(.35s + var(--i) * .22s)}
.bl-p{color:var(--accent)}
.bl-h{color:#FBBF24}
.bl-d{color:var(--dim)}
.bl-k{color:var(--accent)}
.bl-draft{color:var(--dim)}
.bl-caret{display:inline-block;width:8px;height:15px;background:var(--accent);vertical-align:-2px;animation:blBlink 1s steps(1) infinite}

/* ---------- featured ---------- */
.bl-feat{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);border-radius:20px;overflow:hidden;border:1px solid var(--accent-line);background:radial-gradient(600px 340px at 100% 0%,var(--accent-faint),transparent 70%),linear-gradient(180deg,#081428,#050B1A);text-decoration:none;color:var(--text);box-shadow:0 40px 80px rgba(0,0,0,.4);transition:border-color .25s ease,transform .25s ease}
.bl-feat::before{content:"";position:absolute;left:48px;right:48px;top:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);z-index:1}
.bl-feat:hover{color:var(--text);border-color:var(--accent);transform:translateY(-3px)}
.bl-feat-img{position:relative;min-height:420px;overflow:hidden;border-inline-end:1px solid var(--line-2)}
.bl-feat-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.bl-feat:hover .bl-feat-img img{transform:scale(1.04)}
.bl-feat-body{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:18px;padding:48px}
.bl-feat-body .h2{font-size:44px}
.bl-feat-body p{color:var(--muted);font-size:17px;line-height:1.65}
.bl-feat-body .link-arrow{margin-top:8px}
.bl-flag{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em}

/* shared meta line */
.bl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.bl-meta b{font-weight:500;color:var(--accent)}
.bl-meta .badge{margin-left:4px;height:22px}

/* ---------- timeline ---------- */
.bl-log{position:relative}
.bl-log::before{content:"";position:absolute;left:135.5px;top:12px;bottom:12px;width:1px;background:linear-gradient(180deg,var(--accent-line),var(--line-2) 40%,transparent)}
.bl-row{position:relative;display:grid;grid-template-columns:100px 24px minmax(0,1fr) 240px;gap:0 24px;align-items:start;padding:32px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text)}
.bl-row:first-child{padding-top:8px}
a.bl-row:hover{color:var(--text)}
.bl-date{text-align:end;padding-top:2px}
.bl-date b{display:block;font-size:44px;line-height:1;font-weight:600;letter-spacing:-.03em}
.bl-date span{display:block;margin-top:6px;font-family:var(--mono);font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}
.bl-node{justify-self:center;width:15px;height:15px;margin-top:14px;border-radius:50%;background:var(--bg);border:2px solid var(--accent);box-shadow:0 0 0 5px var(--bg),0 0 18px var(--accent-line);transition:background .2s ease}
a.bl-row:hover .bl-node{background:var(--accent)}
.bl-body{display:flex;flex-direction:column;gap:10px;padding-top:6px}
.bl-body .h3{font-size:26px;transition:color .2s ease}
a.bl-row:hover .bl-body .h3{color:var(--accent-hi)}
.bl-body p{max-width:560px;color:var(--muted);font-size:15px;line-height:1.6}
.bl-more{font-weight:500;color:var(--accent);font-size:15px}
.bl-thumb{aspect-ratio:16/10;border-radius:12px;overflow:hidden;border:1px solid var(--line-2);background:#081830}
.bl-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
a.bl-row:hover .bl-thumb img{transform:scale(1.05)}

/* drafts: dashed node, faded thumbnail */
.bl-row.is-draft .bl-date b{color:var(--muted)}
.bl-row.is-draft .bl-node{border-style:dashed;border-color:var(--rail);box-shadow:0 0 0 5px var(--bg)}
.bl-row.is-draft .bl-thumb img{filter:grayscale(.7) brightness(.6)}
.bl-row.is-draft .bl-body .h3{color:color-mix(in srgb,var(--text) 80%,var(--bg))}

@media (prefers-reduced-motion: reduce){
  .bl-screen li,.bl-screen p[style]{opacity:1;animation:none}
  .bl-caret{animation:none}
}
@media (max-width: 1100px){
  .bl-feat{grid-template-columns:minmax(0,1fr)}
  .bl-feat-img{min-height:0;aspect-ratio:2/1;border-inline-end:0;border-bottom:1px solid var(--line-2)}
  .bl-row{grid-template-columns:100px 24px minmax(0,1fr) 180px}
}
@media (max-width: 960px){
  .bl-term{max-width:560px}
}
@media (max-width: 640px){
  .bl-feat-body{padding:28px 22px 32px}
  .bl-feat-body .h2{font-size:32px}
  .bl-log::before{left:7px}
  .bl-row{grid-template-columns:16px minmax(0,1fr);gap:12px 16px;padding:28px 0}
  .bl-node{grid-column:1;grid-row:1;width:15px;height:15px;margin-top:4px}
  .bl-date{grid-column:2;grid-row:1;display:flex;align-items:baseline;gap:8px;text-align:start;padding-top:0}
  .bl-date b{font-size:22px}
  .bl-date span{margin-top:0}
  .bl-body{grid-column:2;padding-top:0}
  .bl-body .h3{font-size:22px}
  .bl-thumb{grid-column:2}
}

/* right-to-left: the timeline rail sits on the mirrored node column */
[dir="rtl"] .bl-log::before{left:auto;right:135.5px}
@media (max-width: 640px){
  [dir="rtl"] .bl-log::before{right:7px}
}
[dir="rtl"] .bl-term{direction:ltr;text-align:left}

/* ============================================================
   blog-inside.html: article + sticky aside (stacks under the article below 960px)
   ============================================================ */
.ic{flex:none;vertical-align:-3px}
.bi-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:28px;font-family:var(--mono);font-size:13px;color:var(--muted)}
.bi-meta>div{display:inline-flex;align-items:center;gap:8px}
.bi-meta .ic{color:var(--accent)}
.bi-tag{height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--accent-line);background:var(--accent-faint);color:var(--accent)}

.bi-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:64px;align-items:start}
.bi-grid .article{max-width:none}
.article blockquote{position:relative}
.bi-q{display:flex;width:40px;height:40px;margin-bottom:14px;border-radius:10px;align-items:center;justify-content:center;background:var(--accent-faint);color:var(--accent)}

.bi-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line-2)}
.bi-back{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line-3);text-decoration:none;font-weight:500;transition:border-color .2s ease,color .2s ease}
.bi-back:hover{border-color:var(--accent);color:var(--accent)}
[dir="rtl"] .bi-back .ic,[dir="rtl"] .bi-cta .ic{transform:scaleX(-1)}
.bi-share{display:flex;align-items:center;gap:8px}
.bi-share-l{display:inline-flex;align-items:center;gap:8px;margin-inline-end:6px;font-family:var(--mono);font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.bi-share-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--line-2);color:var(--muted);transition:border-color .2s ease,color .2s ease,background .2s ease}
.bi-share-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-faint)}

.bi-aside{position:sticky;top:calc(var(--head-h) + 24px);display:flex;flex-direction:column;gap:16px}
.bi-box{display:block;padding:24px;border-radius:16px;border:1px solid var(--line-2);background:rgba(8,16,32,.7)}
.bi-box .eyebrow{margin-bottom:14px}
.bi-facts,.bi-others{list-style:none;margin:0;padding:0}
.bi-facts li{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.bi-facts li:first-child{border-top:0;padding-top:0}
.bi-facts .ic{color:var(--accent)}
.bi-facts span{display:block;font-family:var(--mono);font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.bi-facts b{display:block;font-weight:500;margin-top:2px}
.bi-others li{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.bi-others li:first-child{border-top:0;padding-top:0}
.bi-oic{display:flex;width:38px;height:38px;flex:none;border-radius:10px;align-items:center;justify-content:center;border:1px solid var(--line-2);color:var(--accent)}
.bi-others .d{display:block;font-family:var(--mono);font-size:11px;color:var(--dim)}
.bi-others b{display:block;font-weight:500;line-height:1.35;margin:4px 0 8px}
.bi-others .badge{height:22px}
.bi-cta{text-decoration:none;color:var(--text);border-color:var(--accent-line);background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%),rgba(8,16,32,.7);transition:border-color .2s ease,transform .2s ease}
.bi-cta:hover{border-color:var(--accent);transform:translateY(-2px);color:var(--text)}
.bi-cta b{display:block;font-size:19px;font-weight:600}
.bi-cta span{display:block;margin-top:6px;font-size:14px;line-height:1.55;color:var(--muted)}
.bi-go{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-weight:600;color:var(--accent)}

@media (max-width: 960px){
  .bi-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .bi-aside{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .bi-cta{grid-column:1/-1}
}
@media (max-width: 640px){
  .bi-aside{grid-template-columns:minmax(0,1fr)}
  .bi-foot{flex-direction:column;align-items:flex-start}
}

/* timeline nodes hold the category icon */
.bl-node{width:34px;height:34px;margin-top:6px;display:flex;align-items:center;justify-content:center;color:var(--accent)}
.bl-row.is-draft .bl-node{color:var(--dim)}
@media (max-width: 640px){
  .bl-log::before{left:16.5px}
  [dir="rtl"] .bl-log::before{right:16.5px}
  .bl-row{grid-template-columns:34px minmax(0,1fr)}
  .bl-node{width:34px;height:34px;margin-top:0}
}