/* Tracé blog: articles and the index. Loaded after site.css and landing.css. */
.blog main{padding-bottom:24px}
.blog .eyebrow{font:700 13px/1.2 'Space Grotesk',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--pen);margin:0 0 10px}
.b-hero{padding:56px 0 26px;background:radial-gradient(70% 140% at 0% 0%,color-mix(in srgb,var(--pen) 12%,transparent),transparent 70%)}
.b-hero h1{font-size:clamp(32px,5vw,52px);line-height:1.05;margin:0 0 12px;max-width:16ch}
.b-hero .lead{max-width:60ch}
.b-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px;margin:22px 0 40px}
.b-card{display:grid;gap:8px;align-content:start;text-decoration:none;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:12px 12px 16px;transition:transform .2s,box-shadow .2s}
.b-card:hover{transform:translateY(-3px);box-shadow:0 20px 40px -26px rgba(10,20,60,.5)}
.b-card .b-img{display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
.b-card img{width:100%;height:100%;object-fit:cover;display:block}
.b-card b{font:700 19px/1.25 'Space Grotesk',system-ui,sans-serif;letter-spacing:-.3px}
.b-card .b-tags{font-size:12px;font-weight:700;color:var(--pen);text-transform:uppercase;letter-spacing:.05em}
.b-card .b-desc{font-size:14.5px;color:var(--mute);line-height:1.5}

.post-wrap{padding-top:28px}
.post{max-width:1100px}
.crumbs{font-size:14px;color:var(--mute);margin-bottom:18px}.crumbs a{color:var(--mute)}
.post h1{font-size:clamp(30px,4.4vw,46px);line-height:1.08;margin:0 0 10px;max-width:22ch}
.post .meta{color:var(--mute);font-size:14.5px;margin:0 0 22px}
.hero-fig{margin:0 0 30px}.hero-fig img{width:100%;height:auto;border-radius:16px;display:block;background:#000;box-shadow:0 30px 60px -36px rgba(10,20,60,.6)}
.post-grid{display:grid;grid-template-columns:220px minmax(0,720px);gap:44px;align-items:start}
.toc{position:sticky;top:90px;font-size:14px}.toc b{display:block;margin-bottom:8px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:6px;border-left:2px solid var(--line)}.toc a{display:block;padding-left:12px;color:var(--ink);text-decoration:none}.toc a:hover{color:var(--pen)}
.post-body{font-size:18px;line-height:1.7}
.post-body .lead{font-size:20.5px;line-height:1.6;color:var(--ink);margin-top:0}
.post-body h2{font-size:28px;margin:44px 0 12px;scroll-margin-top:90px}
.post-body p,.post-body li{color:var(--ink)}
.post-body li{margin:6px 0}
.post-body figure{margin:28px 0}.post-body figure img{width:100%;height:auto;border-radius:12px;display:block;background:#000}
.post-body figcaption{font-size:14.5px;color:var(--mute);margin-top:8px;line-height:1.5}
.post-body pre{background:var(--stage);color:#E8EAEE;border-radius:12px;padding:14px 18px;overflow:auto;font:15px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.post-body pre.math{font:italic 21px/1.5 Georgia,'Times New Roman',serif;text-align:center;background:var(--soft);color:var(--ink)}
.post-body code{font-size:.88em;background:var(--soft);border-radius:6px;padding:1px 6px}
.post-body pre code{background:none;padding:0}
.post-body .ui{font-weight:700;color:var(--pen)}
.post-body .note{border-left:4px solid var(--yl);background:color-mix(in srgb,var(--yl) 12%,transparent);border-radius:0 12px 12px 0;padding:14px 18px;margin:26px 0;font-size:16.5px}
.post-body .faq details{border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:10px 0;background:var(--paper)}
.post-body .faq summary{cursor:pointer;font-weight:700}.post-body .faq p{margin:10px 0 2px;font-size:16.5px}
.b-cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin:44px 0 10px;padding:22px 24px;border-radius:18px;color:#fff;background:radial-gradient(90% 140% at 0% 0%,#5B7BFF,transparent 60%),radial-gradient(80% 120% at 100% 100%,#9B5CFF,transparent 60%),#3B5BFD}
.b-cta div{display:grid;gap:4px;flex:1;min-width:220px}.b-cta b{font:700 22px/1.2 'Space Grotesk',sans-serif}.b-cta span{opacity:.9;font-size:15.5px}
.b-cta .btn.primary{background:#fff;color:#2236b8;border-color:#fff}
.related h2{font-size:26px;margin:30px 0 0}
@media (max-width:900px){.post-grid{grid-template-columns:minmax(0,1fr);gap:0}.toc{position:static;margin-bottom:10px;display:none}.post-body{font-size:17px}.post-body .lead{font-size:19px}}
.blog .b-hero{padding-bottom:18px}.blog section.b-list{padding:4px 0 30px}
.post-body figure:first-of-type img{box-shadow:0 30px 60px -36px rgba(10,20,60,.6)}
.eyebrow a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.eyebrow a:hover{border-bottom-style:solid}
.b-tagnav{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 28px}
.b-tagnav b{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute,#59625c);margin-right:6px}
.b-tagnav a{font-size:14px;padding:5px 12px;border:1px solid var(--line,#d1d6cf);border-radius:999px;text-decoration:none;color:inherit;background:#fff}
.b-tagnav a:hover{border-color:currentColor}
.b-tagnav small{opacity:.6;margin-left:2px}
.b-list .b-tagnav:last-child{margin:36px 0 0}
.b-hub{margin:14px 0 0;font-size:15px;color:var(--mute)}
.b-hub a{font-weight:600}