/* CodeFrom Journal 21 — visual polish + smart reading tools; layers over existing theme. */
:root{--cf21-purple:#6855f3;--cf21-ink:#1c1b36;--cf21-mint:#a5ffce}
@media(min-width:901px){.layout{width:90%;max-width:1480px}.blog-nav.layout{max-width:1480px}}
.blog-nav-wrap{background:rgba(255,255,255,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 1px 0 rgba(38,31,83,.08)}
.blog-hero{background:radial-gradient(circle at 80% 15%,rgba(119,91,255,.15),transparent 45%),linear-gradient(135deg,#fcfcff,#f6f4ff 57%,#f1fcf8);padding:92px 0 108px}
.blog-hero h1{letter-spacing:-.074em}.blog-hero h1 em{background:linear-gradient(100deg,#5c4ceb,#ad5ce4,#16aa92);-webkit-background-clip:text;background-clip:text;color:transparent}
.blog-hero-actions .button-primary,.blog-hire a{box-shadow:0 16px 40px rgba(79,66,185,.16)}
.hero-art{filter:drop-shadow(0 25px 30px rgba(81,55,160,.09))}
.cf21-spotlight{padding:42px 0 90px;background:#fcfbff}
.cf21-feature-layout{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:0;background:white;border:1px solid #e7e1f5;border-radius:29px;box-shadow:0 24px 85px rgba(42,30,110,.08);overflow:hidden;min-height:350px}
.cf21-feature-info{padding:clamp(26px,4vw,57px);display:flex;flex-direction:column;justify-content:center;gap:0;min-width:0}
.cf21-chip{align-self:start;border:1px solid #d9d0fb;border-radius:100px;color:#5544cb;background:#f3efff;font:800 11px 'DM Sans',sans-serif;letter-spacing:.12em;padding:9px 13px}
.cf21-overline{font-size:12px;letter-spacing:.12em;font-weight:800;color:#777290;margin:27px 0 9px;text-transform:uppercase}
.cf21-feature-info h2{font:750 clamp(32px,3.4vw,55px)/1.09 'Space Grotesk',sans-serif;letter-spacing:-.05em;margin:0 0 16px;color:#19182c}
.cf21-feature-info h2 a:hover{color:#6553eb}
.cf21-feature-info>p:not(.cf21-overline){font-size:15px;line-height:1.8;color:#65627b;margin:0 0 27px;max-width:570px}
.cf21-feature-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:12px;color:#78718d}
.cf21-feature-bottom a{border:1px solid #dad4f9;background:#6855f3;color:#fff;font-weight:800;border-radius:13px;padding:13px 17px;white-space:nowrap;transition:transform .2s,background .2s}
.cf21-feature-bottom a:hover{background:#4131bb;transform:translateY(-2px)}
.cf21-feature-image{min-height:350px;display:block;overflow:hidden;background:linear-gradient(140deg,#e5e0fe,#d6f7ee)}
.cf21-feature-image .blog-card-cover,.cf21-feature-image img,.cf21-feature-image .cf21-feature-cover{width:100%;height:100%;min-height:350px;object-fit:cover;border-radius:0;display:block;transition:transform .5s}
.cf21-feature-image:hover img{transform:scale(1.035)}
.articles-section{background:#f7f6fd;padding-top:88px}
.cf21-explore-hint{display:flex;justify-content:space-between;gap:18px;color:#7d758f;font-size:12px;margin:22px 0 16px;font-weight:700}
.articles-grid{gap:24px}
.blog-card{border:1px solid #e9e6f3;box-shadow:0 12px 28px rgba(47,38,100,.055);overflow:hidden;transition:transform .24s,box-shadow .24s,border-color .24s}
.blog-card:hover{transform:translateY(-7px);box-shadow:0 26px 55px rgba(47,38,100,.14);border-color:#dbd1ff}
.blog-card-content h3{letter-spacing:-.035em}
.blog-search{position:relative}.cf21-suggest{position:absolute;z-index:15;left:0;right:0;top:100%;margin-top:8px;padding:8px;background:white;border:1px solid #ded8fa;border-radius:16px;box-shadow:0 18px 60px rgba(38,26,99,.18);max-height:320px;overflow-y:auto}
.cf21-suggest[hidden]{display:none}.cf21-suggest a{padding:12px 14px;display:block;border-radius:10px}.cf21-suggest a:hover,.cf21-suggest a:focus-visible{background:#f3f0ff}.cf21-suggest strong{display:block;font-size:13px;color:#201a39}.cf21-suggest small{display:block;font-size:11px;color:#6855c0;margin-top:5px}
.cf21-reading-progress{position:fixed;top:0;left:0;right:0;z-index:100;height:4px;pointer-events:none}.cf21-reading-progress span{display:block;height:100%;width:0%;background:linear-gradient(90deg,#5e55e7,#a85cdd,#6ce5ae);transition:width .08s linear}
.cf21-article-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin:18px auto 25px;padding:11px 16px;border:1px solid #e8e4f1;border-radius:15px;background:#fff;color:#716b87;font-size:12px;font-weight:700}
.cf21-toolbar-dot{color:#7257e8;margin-right:7px}.cf21-toolbar-buttons{display:flex;gap:8px;flex-wrap:wrap}
.cf21-toolbar-buttons button{border:1px solid #e3def1;background:#faf9ff;color:#4d437c;border-radius:10px;padding:8px 12px;font-size:12px;font-weight:800;transition:background .18s,transform .18s}
.cf21-toolbar-buttons button:hover{background:#eae6ff;transform:translateY(-1px)}.cf21-toolbar-buttons button[aria-pressed=true]{color:#fff;background:#6253e7;border-color:#6253e7}
.cf21-toc{border:1px solid #e6e2ef;background:#fff;border-radius:17px;padding:22px;margin-bottom:18px}
.cf21-toc[hidden]{display:none}.cf21-toc .small-label{margin-bottom:14px}.cf21-toc a{display:block;border-left:2px solid #e3e0ee;padding:9px 9px 9px 13px;color:#625b76;font-size:12px;line-height:1.5;transition:all .2s}.cf21-toc a:hover,.cf21-toc a.is-active{border-color:#6954e7;background:#f7f5ff;color:#4a3bc8}
.article-prose h2,.article-prose h3{scroll-margin-top:130px}.article-sidebar{align-self:start}
@media (prefers-reduced-motion:reduce){.blog-card,.cf21-feature-bottom a,.cf21-feature-image img,.cf21-toolbar-buttons button{transition:none!important}}
@media(max-width:900px){.cf21-feature-layout{grid-template-columns:1fr}.cf21-feature-image{min-height:230px;max-height:360px;order:-1}.cf21-feature-image img{min-height:230px}.cf21-feature-info{padding:30px}}
@media(max-width:640px){.cf21-spotlight{padding:18px 0 55px}.cf21-feature-layout{border-radius:20px}.cf21-feature-info{padding:24px}.cf21-feature-info h2{font-size:32px}.cf21-feature-bottom{align-items:start}.cf21-explore-hint span:last-child{display:none}.cf21-article-toolbar{margin:10px auto 20px}.cf21-toolbar-buttons{width:100%}.cf21-toolbar-buttons button{flex:1}.blog-hero{padding-bottom:62px}}

/* Featured cover uses flex layout, keeping artwork/title vertically balanced. */
.cf21-feature-image .cf21-feature-cover{display:flex;flex-direction:column;justify-content:space-between;padding:32px 38px;}
.cf21-feature-image .cf21-feature-cover .cover-word{font-size:clamp(42px,5vw,72px);line-height:1.04;max-width:470px;}
.cf21-feature-image .cf21-feature-cover .cover-label{font-size:10px;}