.sbl-root{--dark:#0b1014;--dark2:#12191e;--ink:#172127;--lime:#c8f56b;--lime2:#a7d64b;--cream:#f7f7f3;--line:rgba(22,32,38,.13);--muted:#647176;--radius:22px;--radius-lg:30px;--shadow:0 18px 52px rgba(8,16,20,.10)} :where(.sbl-root) *{box-sizing:border-box}.sbl-root{scroll-behavior:smooth}.sbl-root{margin:0;background:var(--cream);color:var(--ink);font-family:'Inter',Arial,sans-serif;-webkit-font-smoothing:antialiased}:where(.sbl-root) button,:where(.sbl-root) input,:where(.sbl-root) select{font:inherit}:where(.sbl-root) button{cursor:pointer}:where(.sbl-root) a{color:inherit;text-decoration:none}:where(.sbl-root) img{max-width:100%}:where(.sbl-root) button:focus-visible,:where(.sbl-root) a:focus-visible,:where(.sbl-root) input:focus-visible,:where(.sbl-root) select:focus-visible{outline:3px solid #6fa80f;outline-offset:3px}:where(.sbl-root) svg{display:block}:where(.sbl-root) ::selection{background:var(--lime);color:var(--dark)}:where(.sbl-root) .screen{display:none}:where(.sbl-root) .screen.active{display:block}:where(.sbl-root) .wrap{width:min(1240px,calc(100% - 72px));margin-inline:auto}:where(.sbl-root) .nav{height:86px;display:flex;align-items:center;justify-content:space-between;gap:36px}:where(.sbl-root) .brand{display:inline-flex;align-items:center;gap:11px;font-family:'Inter',Arial,sans-serif;font-weight:800;font-size:24px;letter-spacing:-1.2px;white-space:nowrap}:where(.sbl-root) .brandmark{display:grid;place-items:center;width:35px;height:35px;border-radius:10px;background:var(--lime);color:#111b18;font-size:24px;line-height:1;transform:rotate(-8deg)}:where(.sbl-root) .brand small{font-size:10px;letter-spacing:2px;color:var(--lime);font-weight:700;vertical-align:top}:where(.sbl-root) .menu-toggle{display:none;border:1px solid #fff3;border-radius:12px;background:none;color:white;padding:10px}:where(.sbl-root) .menu-toggle span{display:block;width:21px;height:2px;background:white;margin:4px 0}:where(.sbl-root) .eyebrow{font-size:11px;letter-spacing:2.2px;text-transform:uppercase;font-weight:800;display:flex;align-items:center;gap:9px}:where(.sbl-root) .eyebrow .dot{height:8px;width:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 14px #c8f56b88}:where(.sbl-root) .arrow-link{display:inline-flex;align-items:center;gap:11px;font-size:13px;font-weight:800;transition:gap .2s}:where(.sbl-root) .arrow-link:hover{gap:17px}:where(.sbl-root) .arrow-link .round{display:grid;place-items:center;width:32px;height:32px;border:1px solid currentColor;border-radius:50%}:where(.sbl-root) .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:99px;padding:16px 24px;font-weight:800;font-size:13px;letter-spacing:.1px;border:0;white-space:nowrap}:where(.sbl-root) .btn-lime{background:var(--lime);color:#111b18}:where(.sbl-root) .btn-lime:hover{background:#dcff9a}:where(.sbl-root) .btn-outline{color:#fff;border:1px solid #ffffff60;background:transparent}:where(.sbl-root) .btn-dark{background:#111b1e;color:white}:where(.sbl-root) .btn-cream{background:var(--cream);color:var(--ink);border:1px solid #dce1da}:where(.sbl-root) .muted{color:var(--muted)} /* Archive */ :where(.sbl-root) .hero{color:#fff;background:radial-gradient(ellipse at 87% 19%,rgba(177,245,102,.08),transparent 34%),linear-gradient(120deg,#0a1015,#131b1b);padding:94px 0 92px;overflow:hidden}:where(.sbl-root) .hero-layout{display:grid;grid-template-columns:1.08fr .92fr;gap:62px;align-items:center}:where(.sbl-root) .hero-label{color:var(--lime);margin-bottom:33px}:where(.sbl-root) .hero h1,:where(.sbl-root) .article-head h1{font-family:'Inter',Arial,sans-serif;font-weight:800;letter-spacing:-4.7px;line-height:1.065;margin:0}:where(.sbl-root) .hero h1{font-size:clamp(54px,5.4vw,84px);max-width:710px}:where(.sbl-root) .hero h1 em{font-style:normal;color:var(--lime)}:where(.sbl-root) .hero .lead{font-size:17px;line-height:1.75;color:#afbfbd;max-width:515px;margin:29px 0 35px}:where(.sbl-root) .hero-actions{display:flex;align-items:center;gap:28px}:where(.sbl-root) .hero-meta{margin-top:69px;display:flex;gap:40px;color:#a7b5b4;font-size:12px}:where(.sbl-root) .hero-meta strong{display:block;color:#fff;font-size:19px;font-family:'Inter';margin-bottom:5px}:where(.sbl-root) .art-stage{min-height:474px;position:relative;isolation:isolate}:where(.sbl-root) .art-stage:before{content:"";position:absolute;width:510px;height:510px;border:1px solid #d4fd8b20;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 55px #aefa7510,0 0 0 110px #aefa7507}:where(.sbl-root) .code-window{position:absolute;width:86%;top:46px;right:0;border-radius:18px;border:1px solid #ffffff25;background:#1f2929;box-shadow:0 35px 75px #0008;overflow:hidden;transform:rotate(3deg)}:where(.sbl-root) .code-top{display:flex;align-items:center;gap:6px;padding:15px;background:#ffffff0b;border-bottom:1px solid #ffffff14}:where(.sbl-root) .code-top i{width:7px;height:7px;background:#b4bbb2;border-radius:50%}:where(.sbl-root) .code-top span{font-size:10px;color:#98a9a5;margin-left:12px}:where(.sbl-root) .code-body{padding:28px 29px 34px;font:12px/2.05 ui-monospace,SFMono-Regular,Consolas,monospace;color:#9db5a9}:where(.sbl-root) .code-body strong{color:#d4f2b1;font-weight:500}:where(.sbl-root) .code-body b{color:#d8bcfa;font-weight:500}:where(.sbl-root) .code-body .indent{padding-left:22px}:where(.sbl-root) .code-body .line{height:8px;background:#ffffff14;border-radius:12px;margin-bottom:13px}:where(.sbl-root) .code-body .line.w1{width:82%}:where(.sbl-root) .code-body .line.w2{width:66%}:where(.sbl-root) .code-body .line.w3{width:90%}:where(.sbl-root) .code-body .line.w4{width:58%}:where(.sbl-root) .signal-card{position:absolute;left:4%;bottom:12px;border-radius:20px;background:var(--lime);padding:22px 23px;width:270px;color:#172019;box-shadow:0 32px 50px #0004;transform:rotate(-6deg)}:where(.sbl-root) .signal-card small{font-size:10px;text-transform:uppercase;letter-spacing:2px;font-weight:900}:where(.sbl-root) .signal-card .big{font:800 46px/1.1 'Inter',Arial,sans-serif;letter-spacing:-2.5px;margin:10px 0}:where(.sbl-root) .signal-card p{font-size:12px;line-height:1.5;margin:0}:where(.sbl-root) .orbit-dot{position:absolute;background:var(--lime);border-radius:100%;width:13px;height:13px;right:4%;bottom:15%;box-shadow:0 0 32px var(--lime)} :where(.sbl-root) .archive-body{padding:74px 0 98px}:where(.sbl-root) .sectiontop{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:27px}:where(.sbl-root) .sectiontop h2{font:800 clamp(29px,3vw,42px)/1.1 'Inter',Arial,sans-serif;letter-spacing:-1.9px;margin:0 0 9px}:where(.sbl-root) .sectiontop p{font-size:14px;color:#788386;line-height:1.6;margin:0}:where(.sbl-root) .mini-label{font:800 11px/1 'Inter',Arial,sans-serif;letter-spacing:1.9px;text-transform:uppercase;color:#718074;margin-bottom:17px}:where(.sbl-root) .feature{display:grid;grid-template-columns:1.04fr .96fr;border:1px solid #e4e6dd;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 14px 46px #13221b0b;min-height:370px}:where(.sbl-root) .feature-visual{position:relative;background:linear-gradient(135deg,#c7f181,#a9d46b);padding:34px;overflow:hidden;display:flex;align-items:center;justify-content:center}:where(.sbl-root) .feature-visual .raster{position:absolute;inset:0;background-image:linear-gradient(#2d5a2730 1px,transparent 1px),linear-gradient(90deg,#2d5a2730 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(140deg,#000a,transparent)}:where(.sbl-root) .editor{z-index:1;background:#111a1bbf;border:1px solid #ffffff6f;border-radius:16px;overflow:hidden;width:91%;box-shadow:20px 25px 35px #29471d28;transform:rotate(-5deg)}:where(.sbl-root) .editor-top{display:flex;align-items:center;justify-content:space-between;background:#f9fbf6;padding:13px 15px;color:#111b18;font:800 11px Manrope}:where(.sbl-root) .editor-top span:last-child{color:#71816e}:where(.sbl-root) .editor-cols{display:grid;grid-template-columns:1fr 1.08fr;gap:10px;padding:17px}:where(.sbl-root) .editor-col{background:#162828;padding:16px;border-radius:9px;min-height:174px}:where(.sbl-root) .editor-line{height:8px;background:#dae8d122;border-radius:8px;margin-bottom:12px}:where(.sbl-root) .editor-line.green{background:#c9ee756b}:where(.sbl-root) .editor-line.w50{width:50%}:where(.sbl-root) .editor-line.w70{width:70%}:where(.sbl-root) .editor-line.w80{width:80%}:where(.sbl-root) .editor-line.w30{width:30%}:where(.sbl-root) .editor-col.light{background:#eef2e8}:where(.sbl-root) .editor-col.light .editor-line{background:#91ab933e}:where(.sbl-root) .editor-col.light .editor-line.green{background:#90c94b}:where(.sbl-root) .draft-tag{position:absolute;left:27px;top:26px;padding:8px 12px;border:1px solid #263b2473;border-radius:99px;color:#214123;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase}:where(.sbl-root) .feature-copy{padding:43px 43px 38px;display:flex;flex-direction:column;align-items:flex-start}:where(.sbl-root) .pill{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;font-weight:800;color:#4c701c;background:#eef6e2;padding:9px 13px;border-radius:99px}:where(.sbl-root) .feature-copy h3{font:800 clamp(25px,2.4vw,36px)/1.18 'Inter',Arial,sans-serif;letter-spacing:-1.4px;margin:20px 0 16px}:where(.sbl-root) .feature-copy p{font-size:14px;line-height:1.8;color:#657373;max-width:440px;margin:0}:where(.sbl-root) .byline{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:25px;color:#77817b;font-size:11px}:where(.sbl-root) .byline .avatar{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#13211c;color:var(--lime);font-size:13px;font-weight:900}:where(.sbl-root) .feature-copy .readfeature{margin-top:18px}:where(.sbl-root) .filters{display:flex;align-items:center;justify-content:space-between;gap:22px;margin:43px 0 25px}:where(.sbl-root) .tabrow{display:flex;gap:8px;flex-wrap:wrap}:where(.sbl-root) .filter{border:1px solid #d9dfd8;background:transparent;border-radius:99px;padding:11px 16px;color:#55615d;font-size:12px;font-weight:700}:where(.sbl-root) .filter.active,:where(.sbl-root) .filter:hover{background:#16221b;color:white;border-color:#16221b}:where(.sbl-root) .search{height:45px;min-width:232px;display:flex;align-items:center;gap:10px;border:1px solid #d9dfd8;background:white;border-radius:99px;padding:0 14px;color:#81908a}:where(.sbl-root) .search input{outline:none;border:0;width:100%;background:transparent;font-size:12px;color:#172127}:where(.sbl-root) .search input:focus-visible{outline:0}:where(.sbl-root) .search:focus-within{border-color:#6a963d;box-shadow:0 0 0 3px #b2d57b36}:where(.sbl-root) .article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}:where(.sbl-root) .postcard{display:flex;flex-direction:column;background:#fff;border:1px solid #e3e6e0;border-radius:20px;overflow:hidden;transition:transform .25s,box-shadow .25s;min-height:390px}:where(.sbl-root) .postcard:hover{transform:translateY(-5px);box-shadow:0 20px 38px #0d211217}:where(.sbl-root) .postcard[hidden]{display:none}:where(.sbl-root) .thumb{height:204px;position:relative;overflow:hidden;padding:22px}:where(.sbl-root) .thumb:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,#ffffff67,transparent 38%)}:where(.sbl-root) .thumb .thumb-tag{position:relative;z-index:2;color:#12201b;font:800 10px 'Inter';letter-spacing:1.5px;text-transform:uppercase}:where(.sbl-root) .thumb-a{background:#c7e2d1}:where(.sbl-root) .thumb-b{background:#d5d1f6}:where(.sbl-root) .thumb-c{background:#f1d6ad}:where(.sbl-root) .thumb-d{background:#d6e7ef}:where(.sbl-root) .thumb-e{background:#e1e6b8}:where(.sbl-root) .thumb-f{background:#f6cfd4}:where(.sbl-root) .thumb-bubble{position:absolute;width:230px;height:230px;border:1px solid #18342224;border-radius:50%;right:-30px;bottom:-130px;box-shadow:0 0 0 25px #ffffff36,0 0 0 58px #132b1b11}:where(.sbl-root) .thumb-window{position:absolute;left:45px;top:57px;width:77%;height:136px;background:#192622;border-radius:11px;box-shadow:8px 13px 26px #0002;transform:rotate(-7deg);padding:19px}:where(.sbl-root) .thumb-window i{display:block;height:7px;background:#bff078;width:64%;border-radius:9px;margin:0 0 12px}:where(.sbl-root) .thumb-window i:nth-child(2){width:84%;background:#ffffff44}:where(.sbl-root) .thumb-window i:nth-child(3){width:57%;background:#ffffff44}:where(.sbl-root) .thumb-window i:nth-child(4){width:75%;background:#bff07855}:where(.sbl-root) .thumb-symbol{position:absolute;inset:0;display:grid;place-items:center;color:#162323;font:800 95px 'Inter';letter-spacing:-14px;transform:rotate(-12deg)}:where(.sbl-root) .post-info{padding:23px 22px 24px;display:flex;flex-direction:column;flex:1}:where(.sbl-root) .post-info .meta{font-size:10px;font-weight:800;color:#6f7975;text-transform:uppercase;letter-spacing:1px}:where(.sbl-root) .post-info h3{font:800 19px/1.36 'Inter';letter-spacing:-.65px;margin:13px 0 10px}:where(.sbl-root) .post-info p{font-size:12px;line-height:1.65;color:#6b7771;margin:0 0 22px}:where(.sbl-root) .post-info .bottom{margin-top:auto;display:flex;align-items:center;justify-content:space-between;color:#64766b;font-size:11px;font-weight:700}:where(.sbl-root) .post-info .bottom a{display:flex;align-items:center;gap:8px;color:#1c2923}:where(.sbl-root) .no-results{border:1px dashed #c7cdc4;padding:32px;border-radius:15px;text-align:center;margin-top:20px}:where(.sbl-root) .loadrow{display:flex;justify-content:center;margin-top:32px}:where(.sbl-root) .loadbtn{border:1px solid #cad4c8;background:white;color:#172019;border-radius:99px;padding:13px 25px;font-weight:800;font-size:12px}:where(.sbl-root) .valueband{padding:65px 0 75px;background:#11211c;color:#fff}:where(.sbl-root) .valuegrid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}:where(.sbl-root) .valueband h2{font:800 40px/1.17 'Inter';letter-spacing:-1.9px;margin:10px 0}:where(.sbl-root) .valueband p{color:#aabeb5;font-size:14px;line-height:1.7;max-width:690px}:where(.sbl-root) .valueband .mini-label{color:var(--lime)}:where(.sbl-root) footer{background:#0c1315;color:#9facaa;padding:34px 0;border-top:1px solid #ffffff20} /* Article */ :where(.sbl-root) .article-screen{background:#fafbf8}:where(.sbl-root) .reading-progress{position:fixed;left:0;top:0;z-index:101;height:4px;width:0;background:var(--lime2);transition:width .1s}:where(.sbl-root) .article-hero{background:#10191a;color:#fff;padding:66px 0 78px}:where(.sbl-root) .crumb{font-size:12px;color:#9aa9a7;margin-bottom:44px;display:flex;gap:12px;align-items:center}:where(.sbl-root) .crumb a:hover{color:var(--lime)}:where(.sbl-root) .article-head{max-width:950px}:where(.sbl-root) .article-head .category{color:var(--lime);font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;margin-bottom:24px}:where(.sbl-root) .article-head h1{font-size:clamp(40px,5.2vw,73px);max-width:900px}:where(.sbl-root) .article-head .deck{color:#b5c6bf;font-size:17px;line-height:1.75;max-width:780px;margin:28px 0 25px}:where(.sbl-root) .authorline{display:flex;flex-wrap:wrap;align-items:center;gap:13px;font-size:12px;color:#c5d1ca}:where(.sbl-root) .authorline .avatar{display:grid;place-items:center;background:var(--lime);color:#162216;border-radius:50%;width:38px;height:38px;font:900 18px Manrope}:where(.sbl-root) .authorline .sep{height:5px;width:5px;background:#92a49b;border-radius:50%}:where(.sbl-root) .article-body-wrap{padding:44px 0 100px}:where(.sbl-root) .article-layout{display:grid;grid-template-columns:185px minmax(0,740px) 180px;gap:42px;align-items:start}:where(.sbl-root) .side-rail{position:sticky;top:30px;padding-top:21px}:where(.sbl-root) .rail-label{font:800 10px 'Inter';letter-spacing:1.7px;text-transform:uppercase;color:#65786e;margin-bottom:17px}:where(.sbl-root) .toclist{display:flex;flex-direction:column;gap:8px;border-left:1px solid #d4dfd1;padding-left:18px}:where(.sbl-root) .toclist a{color:#77877d;font-size:12px;line-height:1.4;padding:7px 0}:where(.sbl-root) .toclist a:hover,:where(.sbl-root) .toclist a.on{color:#283f20;font-weight:800}:where(.sbl-root) .sidebar-note{margin-top:36px;padding:19px;border:1px solid #e0e6dc;border-radius:16px;background:#fff;font-size:12px}:where(.sbl-root) .sidebar-note h3{font:800 15px 'Inter';letter-spacing:-.3px;margin:0 0 9px}:where(.sbl-root) .sidebar-note p{line-height:1.65;color:#74827b}:where(.sbl-root) .sidebar-note a{font-weight:800;color:#2f6215}:where(.sbl-root) .mini-art{border-radius:13px;height:90px;background:linear-gradient(120deg,#ddf0cf,#b9e891);display:grid;place-items:center;margin-bottom:18px;font-size:48px;font-weight:900}:where(.sbl-root) .listen{background:#edf4e5;border:1px solid #dce8cf;border-radius:20px;padding:22px 25px;margin-bottom:38px;box-shadow:0 12px 25px #25480b06}:where(.sbl-root) .listen-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}:where(.sbl-root) .listen-header .label{font:800 10px 'Inter';letter-spacing:1.8px;color:#476534;text-transform:uppercase;display:flex;align-items:center;gap:7px}:where(.sbl-root) .listen-header .label svg{width:16px;height:16px}:where(.sbl-root) .listen-header .duration{font-size:11px;color:#667960}:where(.sbl-root) .listen-row{display:flex;align-items:center;gap:18px}:where(.sbl-root) .player-btn{height:53px;width:53px;flex:0 0 53px;background:#18291c;color:var(--lime);display:grid;place-items:center;border:0;border-radius:50%}:where(.sbl-root) .player-btn svg{width:23px;height:23px}:where(.sbl-root) .player-main{flex:1;min-width:0}:where(.sbl-root) .player-title{font-size:13px;font-weight:800;margin-bottom:10px}:where(.sbl-root) .track{height:5px;background:#ccddc3;border-radius:99px;overflow:hidden;position:relative}:where(.sbl-root) .trackfill{height:100%;width:0%;background:#568827;border-radius:99px;transition:width .1s}:where(.sbl-root) .player-times{display:flex;justify-content:space-between;margin-top:8px;color:#677e69;font-size:10px}:where(.sbl-root) .player-side{display:flex;flex-direction:column;gap:7px;align-items:end}:where(.sbl-root) .player-side select{border:1px solid #c0d6b5;border-radius:10px;background:#fff;color:#234129;padding:7px 8px;font-size:11px}:where(.sbl-root) .stop-btn{border:0;background:none;color:#39563c;font-size:11px;font-weight:800}:where(.sbl-root) .listen-status{font-size:10px;line-height:1.4;color:#587453;margin-top:12px;min-height:16px}:where(.sbl-root) .articletext{font-size:16px;line-height:1.95;color:#374741}:where(.sbl-root) .articletext p{margin:0 0 23px}:where(.sbl-root) .articletext h2{font:800 30px/1.25 'Inter';letter-spacing:-1.15px;color:#15251b;margin:49px 0 19px;scroll-margin-top:26px}:where(.sbl-root) .articletext h3{font:800 21px/1.3 'Inter';letter-spacing:-.55px;color:#1f3324;margin:37px 0 14px;scroll-margin-top:25px}:where(.sbl-root) .articletext ul,:where(.sbl-root) .articletext ol{padding-left:23px;margin:12px 0 30px}:where(.sbl-root) .articletext li{margin-bottom:10px;padding-left:6px}:where(.sbl-root) .articletext a{color:#3e761e;text-decoration:underline;text-decoration-color:#82a67a;text-underline-offset:3px}:where(.sbl-root) .articletext blockquote{margin:37px 0;padding:23px 27px;border-left:4px solid #9dce53;background:#eef4e6;font:700 20px/1.6 'Inter';color:#233a24;border-radius:0 13px 13px 0}:where(.sbl-root) .article-tools{display:flex;justify-content:flex-end;gap:8px;margin-bottom:21px}:where(.sbl-root) .toolbtn{border:1px solid #dce3dc;background:#fff;color:#40574a;padding:10px 13px;border-radius:99px;font-size:11px;font-weight:800}:where(.sbl-root) .toolbtn:hover{border-color:#a0c47f}:where(.sbl-root) .articletext.large{font-size:19px}:where(.sbl-root) .articletext.large p{line-height:2.05}:where(.sbl-root) .article-cta{background:#15251d;border-radius:21px;color:#fff;padding:31px 32px;margin-top:55px}:where(.sbl-root) .article-cta .eyebrow{color:var(--lime);font-size:10px}:where(.sbl-root) .article-cta h2{font:800 27px/1.3 'Inter';letter-spacing:-1px;margin:15px 0}:where(.sbl-root) .article-cta p{font-size:13px;line-height:1.75;color:#bacac1;margin-bottom:20px}:where(.sbl-root) .related-section{border-top:1px solid #dce4db;padding:57px 0 65px}:where(.sbl-root) .related-section h2{font:800 31px 'Inter';letter-spacing:-1px}:where(.sbl-root) .backtiny{color:#4d6252;font-size:12px;font-weight:800;display:inline-flex;gap:9px;align-items:center}:where(.sbl-root) .topnote{font-size:10px;font-weight:700;color:#9bad9e;padding:8px 10px;border:1px solid #ffffff27;border-radius:99px} @media(max-width:1130px){:where(.sbl-root) .hero-layout{gap:20px}:where(.sbl-root) .hero h1{letter-spacing:-3px}:where(.sbl-root) .article-layout{grid-template-columns:160px minmax(0,1fr);gap:30px}:where(.sbl-root) .right-rail{display:none}:where(.sbl-root) .article-grid{gap:16px}:where(.sbl-root) .feature-copy{padding:33px}} @media(max-width:800px){:where(.sbl-root) .wrap{width:min(100% - 36px,640px)}:where(.sbl-root) .nav{height:72px}:where(.sbl-root) .menu-toggle{display:block}:where(.sbl-root) .hero{padding:55px 0 65px}:where(.sbl-root) .hero-layout{grid-template-columns:1fr}:where(.sbl-root) .hero h1{font-size:clamp(43px,10vw,70px);letter-spacing:-2.6px}:where(.sbl-root) .hero .lead{font-size:15px}:where(.sbl-root) .art-stage{min-height:390px;margin:4px 0 0}:where(.sbl-root) .code-window{top:28px;width:82%;right:4%}:where(.sbl-root) .signal-card{bottom:0;left:4%}:where(.sbl-root) .hero-meta{margin-top:39px;gap:25px}:where(.sbl-root) .archive-body{padding:48px 0 70px}:where(.sbl-root) .feature{grid-template-columns:1fr}:where(.sbl-root) .feature-visual{min-height:265px}:where(.sbl-root) .feature-copy{padding:26px}:where(.sbl-root) .filters{flex-direction:column;align-items:stretch}:where(.sbl-root) .search{min-width:unset;width:100%}:where(.sbl-root) .article-grid{grid-template-columns:repeat(2,1fr)}:where(.sbl-root) .valuegrid{grid-template-columns:1fr}:where(.sbl-root) .valueband{padding:48px 0}:where(.sbl-root) .article-hero{padding:38px 0 50px}:where(.sbl-root) .article-head h1{font-size:clamp(37px,7.7vw,56px);letter-spacing:-2px}:where(.sbl-root) .article-head .deck{font-size:15px}:where(.sbl-root) .crumb{margin-bottom:35px}:where(.sbl-root) .article-layout{display:block}:where(.sbl-root) .left-rail{display:none}:where(.sbl-root) .article-body-wrap{padding:28px 0 65px}:where(.sbl-root) .listen{padding:17px}:where(.sbl-root) .articletext h2{font-size:25px}:where(.sbl-root) .articletext h3{font-size:19px}} @media(max-width:520px){:where(.sbl-root) .brand{font-size:20px}:where(.sbl-root) .brandmark{width:30px;height:30px;font-size:19px}:where(.sbl-root) .brand small{display:none}:where(.sbl-root) .hero-actions{gap:13px;flex-wrap:wrap}:where(.sbl-root) .hero-meta{gap:20px}:where(.sbl-root) .hero-meta strong{font-size:17px}:where(.sbl-root) .art-stage{min-height:285px}:where(.sbl-root) .code-window{top:16px;width:91%;right:1%}:where(.sbl-root) .code-body{padding:20px 22px;font-size:10px}:where(.sbl-root) .signal-card{width:212px;padding:17px}:where(.sbl-root) .signal-card .big{font-size:37px}:where(.sbl-root) .signal-card p{font-size:10px}:where(.sbl-root) .sectiontop{align-items:start;flex-direction:column}:where(.sbl-root) .article-grid{grid-template-columns:1fr}:where(.sbl-root) .thumb{height:200px}:where(.sbl-root) .valueband h2{font-size:32px}:where(.sbl-root) .feature-copy h3{font-size:25px}:where(.sbl-root) .feature-visual{min-height:225px}:where(.sbl-root) .editor-col{min-height:130px}:where(.sbl-root) .article-head h1{font-size:35px}:where(.sbl-root) .authorline{gap:8px}:where(.sbl-root) .listen-row{flex-wrap:wrap}:where(.sbl-root) .player-side{flex-direction:row;align-items:center;width:100%;justify-content:flex-end}:where(.sbl-root) .player-main{min-width:190px}:where(.sbl-root) .articletext{font-size:15px}:where(.sbl-root) .articletext h2{font-size:23px}:where(.sbl-root) .article-cta{padding:25px}:where(.sbl-root) .article-cta h2{font-size:23px}} @media(prefers-reduced-motion:reduce){:where(.sbl-root) *,:where(.sbl-root) *:before,:where(.sbl-root) *:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}} /* Stafflancer V2: site-matched palette, Inter typography, restrained font weight */ .sbl-root{--dark:#0B1220;--dark2:#151D2C;--ink:#181818;--lime:#5209E5;--lime2:#5209E5;--cream:#FFFFFF;--line:#E9EEF5;--muted:#667183;--radius:16px;--radius-lg:21px;--shadow:0 18px 44px rgba(11,18,32,.06);--brand:#5209E5;--blue:#2B4A8F;--wash:#F7F9FF} .sbl-root{background:#fff;color:#181818;font-family:'Inter',Arial,sans-serif;font-weight:400;line-height:1.55} :where(.sbl-root) strong,:where(.sbl-root) b{font-weight:600} :where(.sbl-root) .wrap{width:min(1240px,calc(100% - 76px))} :where(.sbl-root) .nav{height:82px} :where(.sbl-root) .brand{font:600 25px/1 'Inter',Arial,sans-serif;letter-spacing:-.9px;color:#fff} :where(.sbl-root) .brandmark{width:34px;height:34px;background:#5209E5;border-radius:9px;color:#fff;font-size:21px;font-weight:600;transform:none;letter-spacing:-1px} :where(.sbl-root) .brand small{color:#fff} :where(.sbl-root) .hero{color:#181818;background:#F7F9FF;min-height:auto;padding:82px 0 88px;border-bottom:1px solid #E9EEF5} :where(.sbl-root) .hero-layout{grid-template-columns:1.06fr .94fr;gap:72px} :where(.sbl-root) .hero-label{color:#5209E5;margin-bottom:20px;font-size:11px;font-weight:500;letter-spacing:1.5px} :where(.sbl-root) .hero-label .dot{display:none} :where(.sbl-root) .hero h1{font-size:clamp(45px,4.4vw,69px);line-height:1.12;letter-spacing:-2.25px;max-width:720px;font-weight:600!important} :where(.sbl-root) .hero h1 em{color:#5209E5;font-weight:600;font-style:normal} :where(.sbl-root) .hero .lead{color:#556275;font-size:16px;line-height:1.82;margin:26px 0 29px;max-width:530px} :where(.sbl-root) .btn{font-size:13px;font-weight:500;padding:14px 22px;letter-spacing:0} :where(.sbl-root) .btn-lime{background:#5209E5;color:#fff} :where(.sbl-root) .btn-lime:hover{background:#6e34ed;color:#fff} :where(.sbl-root) .arrow-link{color:#2B4A8F;font-size:13px;font-weight:500;gap:10px} :where(.sbl-root) .arrow-link .round{display:none} :where(.sbl-root) .hero-actions{gap:26px} :where(.sbl-root) .hero-meta{margin-top:43px;gap:34px;color:#69778b;font-size:11px} :where(.sbl-root) .hero-meta strong{color:#181818;font-size:14px;margin-bottom:2px;font-weight:600;letter-spacing:0} :where(.sbl-root) .art-stage{min-height:390px;display:flex;align-items:center;justify-content:center} :where(.sbl-root) .brand-showcase{position:relative;width:100%;min-height:385px;background:#0B1220;border-radius:16px;color:#fff;overflow:hidden;box-shadow:0 30px 65px #10243b1f;transform:none} :where(.sbl-root) .brand-showcase:before{content:'';position:absolute;width:300px;height:300px;border:1px solid #bdadff50;border-radius:50%;right:-110px;top:66px;box-shadow:0 0 0 35px #865de512,0 0 0 70px #865de50b} :where(.sbl-root) .showcase-top{display:flex;align-items:center;justify-content:space-between;padding:20px 25px;border-bottom:1px solid #ffffff24;font-size:10px;letter-spacing:1.1px;color:#cbd3e4} :where(.sbl-root) .showcase-status{display:flex;align-items:center;gap:8px;letter-spacing:0;color:#a1adc4;font-weight:400} :where(.sbl-root) .showcase-status i{width:7px;height:7px;background:#A4E9AC;border-radius:50%;display:inline-block} :where(.sbl-root) .showcase-body{position:relative;z-index:1;padding:45px 40px 40px} :where(.sbl-root) .showcase-category{color:#C4B2FF;font-size:10px;letter-spacing:1.5px;font-weight:500} :where(.sbl-root) .showcase-title{font-size:clamp(30px,3vw,43px);line-height:1.19;letter-spacing:-1.2px;font-weight:500;margin-top:18px} :where(.sbl-root) .showcase-title span{color:#B8A1FF} :where(.sbl-root) .showcase-body p{max-width:370px;margin:19px 0 26px;color:#aebbd0;font-size:13px;line-height:1.7} :where(.sbl-root) .showcase-rule{height:1px;background:#ffffff25;max-width:350px} :where(.sbl-root) .showcase-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:20px} :where(.sbl-root) .showcase-tags span{border:1px solid #ffffff35;padding:7px 10px;border-radius:99px;font-size:10px;color:#e0dffa} :where(.sbl-root) .showcase-corner{position:absolute;bottom:15px;right:22px;color:#76839b;font-size:10px} :where(.sbl-root) .archive-body{background:#fff;padding:72px 0 98px} :where(.sbl-root) .mini-label{font:500 11px/1 'Inter',Arial,sans-serif;letter-spacing:1.3px;color:#5209E5} :where(.sbl-root) .sectiontop h2{font:600 clamp(30px,2.8vw,39px)/1.2 'Inter',Arial,sans-serif;letter-spacing:-1.2px;color:#181818} :where(.sbl-root) .sectiontop p{color:#677487} :where(.sbl-root) .feature{border:1px solid #E9EEF5;border-radius:16px;box-shadow:0 10px 38px #0B12200b} :where(.sbl-root) .feature-visual{background:linear-gradient(145deg,#F1EDFF,#E7EEFC);min-height:340px} :where(.sbl-root) .feature-visual .raster{background-image:linear-gradient(#b4a2d622 1px,transparent 1px),linear-gradient(90deg,#b4a2d622 1px,transparent 1px)} :where(.sbl-root) .draft-tag{color:#5209E5;background:#FFFFFFaa;border:1px solid #5209E522;border-radius:99px;letter-spacing:1px;font-weight:500} :where(.sbl-root) .editor{background:#0B1220;transform:none;border-radius:12px;border:1px solid #E9EEF5;box-shadow:0 25px 35px #2812611b} :where(.sbl-root) .editor-top{background:#fff;font:500 11px Inter,Arial,sans-serif} :where(.sbl-root) .editor-col{background:#17203A} :where(.sbl-root) .editor-col.light{background:#fff} :where(.sbl-root) .editor-line.green{background:#936EEDaa} :where(.sbl-root) .editor-col.light .editor-line.green{background:#9675fa} :where(.sbl-root) .feature-copy{padding:43px} :where(.sbl-root) .feature-copy h3{font:600 clamp(25px,2.25vw,32px)/1.24 'Inter',Arial,sans-serif;letter-spacing:-.8px;color:#141c2d;margin:20px 0 14px} :where(.sbl-root) .feature-copy p{color:#687487} :where(.sbl-root) .pill{color:#5209E5;background:#F1EDFF;font-size:10px;font-weight:500;letter-spacing:.3px} :where(.sbl-root) .byline{color:#677487} :where(.sbl-root) .byline .avatar,:where(.sbl-root) .authorline .avatar{background:#F0ECFF;color:#5209E5;font:600 14px Inter,Arial,sans-serif} :where(.sbl-root) .arrow-link.readfeature{color:#5209E5} :where(.sbl-root) .filter{border:1px solid #D7E0EC;color:#4A5672;font-size:12px;font-weight:500;background:#fff} :where(.sbl-root) .filter.active,:where(.sbl-root) .filter:hover{background:#5209E5;border-color:#5209E5;color:#fff} :where(.sbl-root) .search{border:1px solid #D7E0EC;border-radius:99px} :where(.sbl-root) .search:focus-within{border-color:#5209E5;box-shadow:0 0 0 3px #5209E51a} :where(.sbl-root) .article-grid{gap:24px} :where(.sbl-root) .postcard{border:1px solid #E9EEF5;min-height:370px;border-radius:15px;box-shadow:0 6px 20px #0B122005} :where(.sbl-root) .postcard:hover{box-shadow:0 15px 34px #0b122017;transform:translateY(-3px)} :where(.sbl-root) .thumb{height:200px} :where(.sbl-root) .thumb-a{background:#EBE6FF}:where(.sbl-root) .thumb-b{background:#E7EDF9}:where(.sbl-root) .thumb-c{background:#E8F2F4}:where(.sbl-root) .thumb-d{background:#F2EAFE}:where(.sbl-root) .thumb-e{background:#F1F4F9}:where(.sbl-root) .thumb-f{background:#F2E6EE} :where(.sbl-root) .thumb .thumb-tag{font:500 10px Inter,Arial,sans-serif;color:#5209E5} :where(.sbl-root) .thumb-window{background:#141F3A;transform:none;box-shadow:8px 13px 26px #0001} :where(.sbl-root) .thumb-window i,:where(.sbl-root) .thumb-window i:nth-child(4){background:#9C81FA70} :where(.sbl-root) .thumb-symbol{color:#57449a;font-weight:500} :where(.sbl-root) .post-info h3{font-weight:600;letter-spacing:-.35px} :where(.sbl-root) .post-info .meta,:where(.sbl-root) .post-info p{color:#6B7787} :where(.sbl-root) .post-info .bottom a{color:#5209E5;font-weight:500} :where(.sbl-root) .valueband{background:#0B1220;color:#fff;padding:65px 0} :where(.sbl-root) .valueband h2{font:600 clamp(30px,3vw,40px)/1.25 Inter,Arial,sans-serif;letter-spacing:-1.2px} :where(.sbl-root) .valueband p{color:#bcc5d7} :where(.sbl-root) .valueband .mini-label{color:#b5a1ff} :where(.sbl-root) .valueband .btn{background:#5209E5;color:#fff} :where(.sbl-root) footer{background:#0B1220;color:#b4bed0;border-top:1px solid #ffffff22} /* Article screen */ :where(.sbl-root) .article-screen{background:#fff} :where(.sbl-root) .reading-progress{background:#5209E5} :where(.sbl-root) .article-hero{background:#F7F9FF;color:#181818;border-bottom:1px solid #E9EEF5;padding:54px 0 64px} :where(.sbl-root) .crumb{margin-bottom:35px;color:#6c7b8c} :where(.sbl-root) .crumb a:hover{color:#5209E5} :where(.sbl-root) .topnote{border:1px solid #DED9F3;background:#F1EDFF;color:#6E44C3;font-weight:500} :where(.sbl-root) .article-head{max-width:920px} :where(.sbl-root) .article-head .category{color:#5209E5;font-size:11px;font-weight:500;letter-spacing:1.4px;margin-bottom:18px} :where(.sbl-root) .article-head h1{color:#181818;font-weight:600!important;font-size:clamp(39px,4.2vw,61px);line-height:1.14;letter-spacing:-2px;max-width:900px} :where(.sbl-root) .article-head .deck{font-size:17px;line-height:1.7;color:#5a6678;margin:20px 0 24px} :where(.sbl-root) .authorline{color:#677487} :where(.sbl-root) .authorline strong{font-weight:500} :where(.sbl-root) .authorline .sep{background:#a5b1c0} :where(.sbl-root) .article-body-wrap{background:#fff;padding:42px 0 95px} :where(.sbl-root) .rail-label{color:#5209E5;font:500 11px Inter,Arial,sans-serif;letter-spacing:1.3px} :where(.sbl-root) .toclist{border-color:#E9EEF5} :where(.sbl-root) .toclist a{color:#647184;font-size:12px} :where(.sbl-root) .toclist a.on,:where(.sbl-root) .toclist a:hover{color:#5209E5;font-weight:500} :where(.sbl-root) .sidebar-note{border-color:#E9EEF5;border-radius:14px;background:#F7F9FF;color:#556275} :where(.sbl-root) .sidebar-note h3{font:600 15px Inter,Arial,sans-serif;color:#141b2c} :where(.sbl-root) .sidebar-note p{color:#68778a} :where(.sbl-root) .sidebar-note a{color:#5209E5;font-weight:500} :where(.sbl-root) .mini-art{background:#EFE9FF;color:#5209E5;font-weight:500} :where(.sbl-root) .listen{background:#F7F9FF;border-color:#E3E8F4;border-radius:15px;box-shadow:none;padding:22px 24px} :where(.sbl-root) .listen-header .label{font:500 11px Inter,Arial,sans-serif;letter-spacing:1.2px;color:#5209E5} :where(.sbl-root) .listen-header .duration{color:#718093} :where(.sbl-root) .player-btn{background:#5209E5;color:#fff} :where(.sbl-root) .player-title{font-weight:500;color:#181818} :where(.sbl-root) .track{background:#D8DBE7} :where(.sbl-root) .trackfill{background:#5209E5} :where(.sbl-root) .player-times,:where(.sbl-root) .listen-status{color:#7A8495} :where(.sbl-root) .player-side select{border-color:#D7E0EC;color:#263652} :where(.sbl-root) .stop-btn{color:#5209E5;font-weight:500} :where(.sbl-root) .article-tools .toolbtn,:where(.sbl-root) .toolbtn{font-weight:500} :where(.sbl-root) .articletext{font-weight:400;color:#273241} :where(.sbl-root) .articletext h2,:where(.sbl-root) .articletext h3{font-weight:600;letter-spacing:-.55px;color:#141c29} :where(.sbl-root) .articletext a{color:#5209E5} :where(.sbl-root) .articletext strong{font-weight:600} :where(.sbl-root) .articletext blockquote{border-color:#5209E5;background:#F7F9FF} :where(.sbl-root) .articletext .callout{background:#F7F9FF;border-color:#E9EEF5} :where(.sbl-root) .article-main .btn-dark{background:#5209E5;color:#fff} :where(.sbl-root) .related-section{background:#F7F9FF;border-top:1px solid #E9EEF5} :where(.sbl-root) .related-section h2{font:600 31px Inter,Arial,sans-serif;letter-spacing:-1px} :where(.sbl-root) .backtiny{font-weight:500;color:#5209E5} /* Keep all visible weights consistent with Stafflancer's less aggressive style */ :where(.sbl-root) .eyebrow,:where(.sbl-root) .arrow-link,:where(.sbl-root) .sectiontop h2,:where(.sbl-root) .feature-copy h3,:where(.sbl-root) .post-info h3,:where(.sbl-root) .valueband h2,:where(.sbl-root) .article-head h1,:where(.sbl-root) .articletext h2,:where(.sbl-root) .articletext h3,:where(.sbl-root) .article-head .category,:where(.sbl-root) .filter,:where(.sbl-root) .mini-label,:where(.sbl-root) .rail-label,:where(.sbl-root) .btn,:where(.sbl-root) .showcase-title,:where(.sbl-root) .editor-top,:where(.sbl-root) .post-info .bottom a{font-weight:600} :where(.sbl-root) .eyebrow,:where(.sbl-root) .arrow-link,:where(.sbl-root) .btn,:where(.sbl-root) .filter,:where(.sbl-root) .mini-label,:where(.sbl-root) .rail-label,:where(.sbl-root) .article-head .category,:where(.sbl-root) .editor-top,:where(.sbl-root) .post-info .bottom a{font-weight:500} /* Layout refinements */ @media(max-width:1130px){:where(.sbl-root) .hero-layout{gap:36px}:where(.sbl-root) .hero h1{letter-spacing:-1.65px}:where(.sbl-root) .article-head h1{letter-spacing:-1.5px}} @media(max-width:800px){ :where(.sbl-root) .wrap{width:min(calc(100% - 36px),640px)}:where(.sbl-root) .nav{height:70px} :where(.sbl-root) .hero{padding:52px 0 62px}:where(.sbl-root) .hero-layout{grid-template-columns:1fr}:where(.sbl-root) .hero h1{font-size:clamp(37px,8.6vw,53px);letter-spacing:-1.4px}:where(.sbl-root) .hero .lead{font-size:15px;margin:20px 0 25px}:where(.sbl-root) .hero-meta{margin-top:30px;gap:18px}:where(.sbl-root) .art-stage{min-height:310px;margin-top:8px}:where(.sbl-root) .brand-showcase{min-height:310px}:where(.sbl-root) .showcase-body{padding:29px 25px}:where(.sbl-root) .showcase-title{font-size:32px}:where(.sbl-root) .showcase-body p{font-size:12px}:where(.sbl-root) .showcase-top{padding:14px 20px}:where(.sbl-root) .hero-actions{gap:13px;flex-wrap:wrap} :where(.sbl-root) .archive-body{padding:49px 0 74px}:where(.sbl-root) .feature-visual{min-height:260px}:where(.sbl-root) .feature-copy{padding:27px}:where(.sbl-root) .sectiontop h2{font-size:31px}:where(.sbl-root) .article-hero{padding:37px 0 44px}:where(.sbl-root) .article-head h1{font-size:clamp(34px,7.7vw,48px);letter-spacing:-1.2px}:where(.sbl-root) .crumb{margin-bottom:27px}:where(.sbl-root) .article-head .deck{font-size:15px} :where(.sbl-root) .article-body-wrap{padding:32px 0 74px}:where(.sbl-root) .listen{padding:17px}:where(.sbl-root) .related-section{padding:45px 0 60px} } @media(max-width:520px){:where(.sbl-root) .brand{font-size:21px}:where(.sbl-root) .brand-showcase{min-height:310px}:where(.sbl-root) .showcase-title{font-size:27px}:where(.sbl-root) .showcase-body{padding:28px 22px}:where(.sbl-root) .hero-meta{gap:12px;flex-wrap:wrap}:where(.sbl-root) .hero-meta strong{font-size:12px}:where(.sbl-root) .hero-meta div{font-size:10px}:where(.sbl-root) .showcase-tags span{font-size:9px}:where(.sbl-root) .feature-copy h3{font-size:25px}:where(.sbl-root) .article-head h1{font-size:35px}:where(.sbl-root) .authorline{gap:9px}} /* Final design alignment QA */ :where(.sbl-root) .art-stage:before,:where(.sbl-root) .art-stage:after{content:none!important;display:none!important} :where(.sbl-root) .art-stage{isolation:auto} @media(max-width:520px){:where(.sbl-root) .nav{gap:11px}:where(.sbl-root) .brand{font-size:20px}:where(.sbl-root) .brandmark{height:30px;width:30px;font-size:18px}:where(.sbl-root) .menu-toggle{padding:8px}:where(.sbl-root) .hero{background:#F7F9FF}} /* Stafflancer V3: preserve V2 editorial layout, honor site colors and typography */ .sbl-root{--brand:#5209E5;--cream:#fff;--ink:#181818;--wash:#F7F9FF} .sbl-root{font-family:Inter,Arial,sans-serif;font-weight:400;color:#181818} :where(.sbl-root) .nav{height:78px;gap:32px} :where(.sbl-root) .brand{font-weight:500!important;color:#181818!important;letter-spacing:-.6px;font-size:26px;max-width:188px;overflow:hidden} :where(.sbl-root) .menu-toggle{border:1px solid #DEE0E5;color:#181818!important;background:#fff} :where(.sbl-root) .menu-toggle span{background:#181818!important} :where(.sbl-root) .hero{background:#F9FAFD!important;color:#181818;padding:72px 0 78px;border-bottom:1px solid #E9EEF5} :where(.sbl-root) .hero-layout{grid-template-columns:1.04fr .96fr;gap:60px} :where(.sbl-root) .hero h1{font-size:clamp(43px,4.25vw,65px)!important;font-weight:500!important;letter-spacing:-2.05px;line-height:1.15;color:#181818} :where(.sbl-root) .hero h1 em{font-weight:500!important;color:#5209E5} :where(.sbl-root) .hero .lead{font-weight:400;line-height:1.76;color:#606874} :where(.sbl-root) .hero-meta{margin-top:38px} :where(.sbl-root) .hero-meta strong{font-weight:500!important} :where(.sbl-root) .eyebrow,:where(.sbl-root) .hero-label,:where(.sbl-root) .mini-label,:where(.sbl-root) .rail-label{font-weight:500!important} :where(.sbl-root) .arrow-link,:where(.sbl-root) .hero-actions .arrow-link{color:#5209E5!important;font-weight:500!important} :where(.sbl-root) .art-stage{min-height:382px;display:flex;align-items:center;justify-content:center} :where(.sbl-root) .art-stage:before,:where(.sbl-root) .art-stage:after{display:none!important;content:none!important} :where(.sbl-root) .site-banner{position:relative;width:100%;height:390px;overflow:hidden;border-radius:19px;background:linear-gradient(145deg,#efeaff 0%,#ebeffe 58%,#f9f5ff 100%);box-shadow:0 24px 55px rgba(30,28,73,.12);isolation:isolate} :where(.sbl-root) .banner-fallback-art{position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 89% 10%,#cabafa 0%,transparent 40%),linear-gradient(130deg,#3B256E,#6351A7 55%,#AEA4E5);z-index:0} :where(.sbl-root) .banner-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff18 1px,transparent 1px),linear-gradient(90deg,#ffffff18 1px,transparent 1px);background-size:32px 32px;opacity:.3} :where(.sbl-root) .banner-sheen{position:absolute;top:-40%;right:-10%;width:70%;height:180%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,#fff2,transparent)} :where(.sbl-root) .banner-ellipse{position:absolute;width:310px;height:310px;border-radius:50%;border:1px solid #ffffff60} :where(.sbl-root) .banner-ellipse.one{top:-110px;right:-70px;box-shadow:0 0 0 38px #ffffff12,0 0 0 76px #ffffff10} :where(.sbl-root) .banner-ellipse.two{bottom:-210px;left:-110px;border:1px solid #ffffff45;box-shadow:0 0 0 45px #ffffff09} :where(.sbl-root) .banner-floating-square{position:absolute;top:70px;right:110px;width:108px;height:108px;border:1px solid #ffffff5c;transform:rotate(15deg);border-radius:18px;background:#ffffff11} :where(.sbl-root) .site-banner-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;transition:opacity .2s} :where(.sbl-root) .banner-loaded .site-banner-photo{opacity:1} :where(.sbl-root) .site-banner-shade{position:absolute;inset:0;z-index:2;background:linear-gradient(0deg,rgba(13,11,28,.77) 0%,rgba(24,16,51,.25) 55%,rgba(23,16,46,.16) 100%)} :where(.sbl-root) .site-banner-kicker{position:absolute;top:25px;left:27px;z-index:3;font-size:10px;letter-spacing:1.35px;color:#fff;font-weight:500} :where(.sbl-root) .site-banner-copy{position:absolute;bottom:30px;left:30px;right:25px;z-index:3;color:#fff} :where(.sbl-root) .site-banner-copy span{display:block;letter-spacing:1.4px;font-size:10px;opacity:.84;font-weight:400} :where(.sbl-root) .site-banner-copy h2{font-size:clamp(24px,2.55vw,36px);line-height:1.15;font-weight:500!important;letter-spacing:-.7px;margin:12px 0 10px;max-width:390px;color:#fff!important} :where(.sbl-root) .site-banner-copy p{font-size:12px;line-height:1.55;opacity:.8;margin:0;max-width:350px;color:#fff} :where(.sbl-root) .hero .btn-lime{background:#5209E5;color:#fff;font-weight:500} :where(.sbl-root) .sectiontop h2,:where(.sbl-root) .feature-copy h3,:where(.sbl-root) .post-info h3{font-weight:500!important;color:#181818!important} :where(.sbl-root) .sectiontop h2{font-size:36px} :where(.sbl-root) .post-info h3{font-size:20px} :where(.sbl-root) .feature-copy h3{font-size:32px} :where(.sbl-root) .post-info .bottom a{color:#5209E5;font-weight:500} :where(.sbl-root) .feature-copy p,:where(.sbl-root) .post-info p,:where(.sbl-root) .sectiontop p,:where(.sbl-root) .article-head .deck{color:#606874} :where(.sbl-root) .thumb-window,:where(.sbl-root) .editor,:where(.sbl-root) .editor-col{background-color:#272341} :where(.sbl-root) .valueband{background:#1c1833!important} :where(.sbl-root) footer{background:#181525!important} :where(.sbl-root) .valueband h2{font-weight:500!important} :where(.sbl-root) .valueband .btn{background:#5209E5} :where(.sbl-root) .article-hero{background:#F9FAFD!important} :where(.sbl-root) .article-head h1{font-weight:500!important;color:#181818!important} :where(.sbl-root) .articletext h2,:where(.sbl-root) .articletext h3,:where(.sbl-root) .related-section h2{font-weight:500!important;color:#181818!important} :where(.sbl-root) .article-banner-figure{position:relative;margin:30px 0 34px;border:1px solid #ececf2;border-radius:16px;background:linear-gradient(135deg,#eeeaf8,#dad5f0);overflow:hidden;min-height:240px} :where(.sbl-root) .article-banner-figure:before{position:absolute;content:'';inset:0;background:linear-gradient(20deg,#d9d2f2,transparent 75%),radial-gradient(circle at 75% 35%,#9e8ed566,transparent 45%)} :where(.sbl-root) .article-banner-photo{position:relative;z-index:1;display:block;width:100%;max-height:400px;aspect-ratio:16/8;object-fit:cover;opacity:0;transition:opacity .2s} :where(.sbl-root) .article-banner-figure.banner-loaded .article-banner-photo{opacity:1} :where(.sbl-root) .article-banner-figure figcaption{position:relative;z-index:2;padding:12px 17px;background:#fff;color:#667083;font-size:11px;border-top:1px solid #ececf2} /* Mobile menu sits beneath the white header, with clear dark text */ @media(max-width:800px){ :where(.sbl-root) .nav{height:70px;gap:15px} :where(.sbl-root) .hero{padding:49px 0 57px} :where(.sbl-root) .hero-layout{grid-template-columns:minmax(0,1fr)!important;gap:30px} :where(.sbl-root) .hero-layout>div{min-width:0;width:100%} :where(.sbl-root) .hero h1{font-size:clamp(36px,8vw,49px)!important;letter-spacing:-1.35px} :where(.sbl-root) .site-banner{height:315px;min-height:315px;border-radius:15px} :where(.sbl-root) .art-stage{min-height:315px;margin-top:0} :where(.sbl-root) .site-banner-copy{bottom:26px;left:24px;right:20px} :where(.sbl-root) .site-banner-copy h2{font-size:29px;max-width:320px} :where(.sbl-root) .site-banner-kicker{left:24px;top:20px} :where(.sbl-root) .article-banner-figure{min-height:160px} } @media(max-width:520px){ :where(.sbl-root) .site-banner{height:295px;min-height:295px} :where(.sbl-root) .art-stage{min-height:295px} :where(.sbl-root) .site-banner-copy h2{font-size:26px} :where(.sbl-root) .sectiontop h2{font-size:30px} } /* Stafflancer V4 content preview. Production integration reuses existing site header and footer. */ .sbl-root{ --st-bg:#ffffff;--st-paper:#ffffff;--st-bg-soft:#f7f8fb;--st-ink:#181818;--st-muted:#545c68; --st-border:#dfe2e9;--st-accent:#5209e5;--st-accent-hover:#4210b3;--st-accent-ink:#ffffff; --st-soft-accent:#f0ebff;--st-soft-text:#4519a2;--st-editor:#222136;--st-editor-line:#8b77d2; --st-audio:#f3efff;--st-audio-border:#ded3ff;--st-track:#ded4f3; --st-dark-panel:#201939;--st-focus:#ffb700;--st-head-surface:#fff; --st-audio-text:#302354;--st-shadow:0 16px 44px rgba(24,14,56,.065); color-scheme:light; } html.sl-theme-dark .sbl-root,html.sl-theme-dark .sbl-root,html.sl-theme-dark .sbl-root,:where(.sbl-root) .dark-mode,:where(.sbl-root) .dark-theme,html.sl-theme-dark .sbl-root{ --st-bg:#111217;--st-paper:#1b1c23;--st-bg-soft:#15161d;--st-ink:#f4f5f8;--st-muted:#b9bdcb; --st-border:#41434f;--st-accent:#b99aff;--st-accent-hover:#d2bbff;--st-accent-ink:#17121e; --st-soft-accent:#322447;--st-soft-text:#e3d8ff;--st-editor:#1c1b2b;--st-editor-line:#b99aff; --st-audio:#241e33;--st-audio-border:#5b4a83;--st-track:#5c526f; --st-dark-panel:#1b1929;--st-focus:#ffce5b;--st-head-surface:#191a20; --st-audio-text:#ede6ff;--st-shadow:0 20px 50px rgba(0,0,0,.2); color-scheme:dark; } @media (prefers-color-scheme:dark){ :where(.sbl-root) html:not([data-st-theme]):not([data-theme]):not(.dark):not(.theme-dark):not(:has(body.dark-mode,body.dark-theme)){ --st-bg:#111217;--st-paper:#1b1c23;--st-bg-soft:#15161d;--st-ink:#f4f5f8;--st-muted:#b9bdcb; --st-border:#41434f;--st-accent:#b99aff;--st-accent-hover:#d2bbff;--st-accent-ink:#17121e; --st-soft-accent:#322447;--st-soft-text:#e3d8ff;--st-editor:#1c1b2b;--st-editor-line:#b99aff; --st-audio:#241e33;--st-audio-border:#5b4a83;--st-track:#5c526f; --st-dark-panel:#1b1929;--st-focus:#ffce5b;--st-head-surface:#191a20; --st-audio-text:#ede6ff;--st-shadow:0 20px 50px rgba(0,0,0,.2); color-scheme:dark; } } .sbl-root{scroll-padding-top:90px}.sbl-root{background:var(--st-bg)!important;color:var(--st-ink)!important;font-family:Inter,Arial,sans-serif!important;font-weight:400} :where(.sbl-root) ::selection{background:#c9b2ff;color:#15131d} :where(.sbl-root) button,:where(.sbl-root) input,:where(.sbl-root) select{font:inherit}:where(.sbl-root) a,:where(.sbl-root) button,:where(.sbl-root) input,:where(.sbl-root) select{touch-action:manipulation} :where(.sbl-root) :is(a,button,input,select):focus-visible{outline:3px solid var(--st-focus)!important;outline-offset:3px} :where(.sbl-root) a{outline-offset:4px} :where(.sbl-root) a:not(.btn):hover{text-decoration-thickness:2px} :where(.sbl-root) .wrap{width:min(1240px,calc(100% - 48px))} /* In WordPress, omit these demo shell elements entirely. The live theme owns header and footer. */ :where(.sbl-root) .nav{height:82px}:where(.sbl-root) .brand{color:var(--st-ink)!important;font-family:Inter,Arial,sans-serif!important;font-weight:500!important} /* Hero: original Stafflancer photo, white Inter 800 heading and no blue text */ :where(.sbl-root) .hero{padding:28px 0 54px!important;background:var(--st-bg-soft)!important;border-bottom:1px solid var(--st-border)} :where(.sbl-root) .blog-photo-hero{position:relative;min-height:435px;background:#131018;isolation:isolate;border-radius:20px;overflow:hidden;box-shadow:var(--st-shadow)} :where(.sbl-root) .blog-hero-photo{position:absolute;z-index:0;right:0;top:0;width:47%;height:100%;object-fit:cover;object-position:38% center;filter:brightness(.82) contrast(1.06)} :where(.sbl-root) .blog-hero-overlay{position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,#100f18 0%,#100f18 38%,rgba(16,15,24,.93) 53%,rgba(16,15,24,.2) 76%,rgba(16,15,24,.06) 100%)} :where(.sbl-root) .blog-hero-content{position:relative;z-index:2;color:#fff;padding:62px 7%;max-width:810px;min-height:435px;display:flex;flex-direction:column;justify-content:center} :where(.sbl-root) .blog-hero-eyebrow{font-size:13px;font-weight:600;letter-spacing:1.4px;color:#e4d8ff;margin:0 0 22px} :where(.sbl-root) .blog-hero-content h1{font-family:Inter,Arial,sans-serif!important;font-size:50px!important;font-weight:800!important;line-height:1.08!important;letter-spacing:-1.7px!important;color:#fff!important;margin:0;max-width:710px} :where(.sbl-root) .blog-hero-lead{color:#f0eef3;font-size:16px;line-height:1.65;max-width:590px;margin:22px 0 25px;font-weight:400} :where(.sbl-root) .blog-hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:15px} :where(.sbl-root) .blog-primary-link{min-height:48px;background:#5209e5;color:#fff!important;font-weight:600;display:inline-flex;gap:14px;align-items:center;border-radius:999px;padding:12px 22px;font-size:15px} :where(.sbl-root) .blog-primary-link:hover{background:#6c3bec} /* editorial archive */ :where(.sbl-root) .archive-body{background:var(--st-bg)!important;padding:62px 0 78px} :where(.sbl-root) .sectiontop h2,:where(.sbl-root) .feature-copy h3,:where(.sbl-root) .post-info h3,:where(.sbl-root) .related-section h2{color:var(--st-ink)!important;font-weight:600!important} :where(.sbl-root) .sectiontop p,:where(.sbl-root) .post-info p,:where(.sbl-root) .feature-copy p,:where(.sbl-root) .article-head .deck{color:var(--st-muted)!important} :where(.sbl-root) .mini-label,:where(.sbl-root) .sectiontop .mini-label,:where(.sbl-root) .rail-label,:where(.sbl-root) .post-info .meta,:where(.sbl-root) .byline,:where(.sbl-root) .filter,:where(.sbl-root) .sectiontop,:where(.sbl-root) #resultCount{color:var(--st-muted)!important} :where(.sbl-root) .feature,:where(.sbl-root) .postcard,:where(.sbl-root) .sidebar-note{background:var(--st-paper)!important;border-color:var(--st-border)!important;box-shadow:var(--st-shadow)} :where(.sbl-root) .feature-copy,:where(.sbl-root) .post-info{color:var(--st-ink)} :where(.sbl-root) .feature-visual{background:linear-gradient(130deg,#eeeaff,#dcd3ff)!important} :where(.sbl-root) .pill,:where(.sbl-root) .draft-tag{background:var(--st-soft-accent)!important;color:var(--st-soft-text)!important;border-color:var(--st-border)!important;font-size:12px} :where(.sbl-root) .editor{background:var(--st-editor)!important} :where(.sbl-root) .editor-top{background:var(--st-paper)!important;color:var(--st-ink)!important;font-family:Inter,Arial,sans-serif;font-weight:500} :where(.sbl-root) .editor-col{background:var(--st-editor)!important} :where(.sbl-root) .editor-line.green{background:var(--st-editor-line)!important} :where(.sbl-root) .editor-col.light{background:#ebe8fc!important} :where(.sbl-root) .filters{margin-top:48px} :where(.sbl-root) .filter{background:var(--st-paper);border-color:var(--st-border)!important;color:var(--st-ink)!important;font-size:14px!important;font-weight:500!important;min-height:44px;padding:10px 17px} :where(.sbl-root) .filter.active{background:var(--st-accent)!important;border-color:var(--st-accent)!important;color:var(--st-accent-ink)!important} :where(.sbl-root) .search{min-height:46px;border-color:var(--st-border);background:var(--st-paper);color:var(--st-muted);font-size:14px} :where(.sbl-root) .search input{color:var(--st-ink);font-size:16px;min-width:0} :where(.sbl-root) .search input::placeholder{color:var(--st-muted)} :where(.sbl-root) .search:focus-within{border-color:var(--st-accent);box-shadow:0 0 0 2px var(--st-soft-accent)} :where(.sbl-root) .post-info .meta{font-size:12px;font-weight:500;letter-spacing:.1px;text-transform:none} :where(.sbl-root) .post-info h3{font-size:20px;line-height:1.35;letter-spacing:-.35px} :where(.sbl-root) .post-info p{font-size:14px;line-height:1.7} :where(.sbl-root) .post-info .bottom,:where(.sbl-root) .post-info .bottom a,:where(.sbl-root) .arrow-link,:where(.sbl-root) .readfeature{font-size:13px!important;font-weight:600!important;color:var(--st-accent)!important} :where(.sbl-root) .post-info .bottom span{color:var(--st-muted)} :where(.sbl-root) .thumb{min-height:201px}:where(.sbl-root) .thumb-tag{font-size:12px!important;font-weight:600!important} :where(.sbl-root) .loadbtn{min-height:48px;background:var(--st-paper);color:var(--st-ink);border:1px solid var(--st-border);font-weight:600;font-size:14px} :where(.sbl-root) .loadbtn:hover{border-color:var(--st-accent)} :where(.sbl-root) .no-results{border-color:var(--st-border);color:var(--st-ink)} :where(.sbl-root) .valueband{background:var(--st-dark-panel)!important} :where(.sbl-root) .valueband h2{font-size:36px;font-weight:600!important;color:#fff!important} :where(.sbl-root) .valueband p{color:#e3ddeb!important;font-size:15px} :where(.sbl-root) .valueband .mini-label{color:#dfcfff!important} :where(.sbl-root) .valueband .btn{background:#6c35e5!important;color:#fff!important;font-weight:600!important} :where(.sbl-root) footer{background:var(--st-head-surface)!important;color:var(--st-muted)!important;border-top:1px solid var(--st-border)!important} :where(.sbl-root) footer a{color:var(--st-ink)!important} /* Article title/intro remain part of the light/dark site context */ :where(.sbl-root) .article-screen,:where(.sbl-root) .article-body-wrap,:where(.sbl-root) .related-section{background:var(--st-bg)!important} :where(.sbl-root) .article-hero{background:var(--st-bg-soft)!important;color:var(--st-ink)!important;border-bottom:1px solid var(--st-border)} :where(.sbl-root) .crumb,:where(.sbl-root) .crumb a,:where(.sbl-root) .authorline{color:var(--st-muted)!important;font-size:13px} :where(.sbl-root) .article-head .category{color:var(--st-accent)!important;font-weight:600;font-size:13px} :where(.sbl-root) .article-head h1{font-family:Inter,Arial,sans-serif!important;font-size:50px!important;font-weight:800!important;line-height:1.12!important;letter-spacing:-1.55px!important;color:var(--st-ink)!important} :where(.sbl-root) .article-head .deck{font-size:17px;line-height:1.7} :where(.sbl-root) .authorline strong{color:var(--st-ink)} :where(.sbl-root) .authorline .avatar{background:var(--st-accent);color:var(--st-accent-ink)} :where(.sbl-root) .articletext{color:var(--st-ink)!important;font-size:17px;line-height:1.85} :where(.sbl-root) .articletext p{color:var(--st-ink)} :where(.sbl-root) .articletext h2{font-weight:600!important;font-size:30px;color:var(--st-ink)!important} :where(.sbl-root) .articletext h3{font-weight:600!important;font-size:23px;color:var(--st-ink)!important} :where(.sbl-root) .articletext blockquote{background:var(--st-soft-accent)!important;color:var(--st-ink)!important;border-left-color:var(--st-accent)!important;font-weight:500} :where(.sbl-root) .articletext a{color:var(--st-accent)!important;text-decoration-color:var(--st-accent)!important} :where(.sbl-root) .article-main,:where(.sbl-root) .side-rail{min-width:0}:where(.sbl-root) .toclist{border-color:var(--st-border)} :where(.sbl-root) .toclist a{font-size:14px;color:var(--st-muted);min-height:40px;display:flex;align-items:center} :where(.sbl-root) .toclist a.on,:where(.sbl-root) .toclist a:hover{color:var(--st-accent)!important;font-weight:600} :where(.sbl-root) .rail-label{font-size:12px!important;font-weight:600!important} :where(.sbl-root) .sidebar-note{color:var(--st-ink)} :where(.sbl-root) .sidebar-note h3{font-weight:600;color:var(--st-ink);font-size:16px} :where(.sbl-root) .sidebar-note p{color:var(--st-muted)!important;font-size:14px} :where(.sbl-root) .sidebar-note a{color:var(--st-accent)!important;font-weight:600} :where(.sbl-root) .listen{background:var(--st-audio)!important;border-color:var(--st-audio-border)!important;box-shadow:none} :where(.sbl-root) .listen-header .label{font-size:12px;font-weight:600;color:var(--st-audio-text)!important} :where(.sbl-root) .listen-header .duration,:where(.sbl-root) .listen-status,:where(.sbl-root) .player-times{color:var(--st-muted)!important;font-size:12px} :where(.sbl-root) .player-title{color:var(--st-ink)!important;font-size:15px;font-weight:600} :where(.sbl-root) .player-btn{background:var(--st-accent)!important;color:var(--st-accent-ink)!important;min-width:52px;min-height:52px} :where(.sbl-root) .track{background:var(--st-track)!important}:where(.sbl-root) .trackfill{background:var(--st-accent)!important} :where(.sbl-root) .player-side select{background:var(--st-paper);color:var(--st-ink);border-color:var(--st-border);font-size:14px;min-height:44px} :where(.sbl-root) .stop-btn{font-size:14px;color:var(--st-audio-text)!important;min-height:44px;padding:8px 10px} :where(.sbl-root) .toolbtn{font-size:14px;min-height:44px;background:var(--st-paper);color:var(--st-ink);border-color:var(--st-border);font-weight:500} :where(.sbl-root) .toolbtn:hover{border-color:var(--st-accent)} :where(.sbl-root) .article-cta{background:var(--st-dark-panel)!important} :where(.sbl-root) .article-cta h2{font-size:27px;font-weight:600;color:#fff} :where(.sbl-root) .article-cta p{color:#e0deeb!important;font-size:15px} :where(.sbl-root) .article-cta .btn{background:#6d36e7!important;color:#fff!important;font-weight:600} :where(.sbl-root) .article-banner-figure{border-color:var(--st-border)!important;background:var(--st-soft-accent)!important;min-height:225px} :where(.sbl-root) .article-banner-figure:before{background:radial-gradient(circle at 80% 20%,#a996ec99,transparent 35%),linear-gradient(125deg,#e4ddfb,#b5a4e8)} :where(.sbl-root) .article-banner-figure figcaption{background:var(--st-paper)!important;color:var(--st-muted)!important;border-color:var(--st-border);font-size:13px} :where(.sbl-root) .related-section{border-color:var(--st-border)} :where(.sbl-root) .backtiny{color:var(--st-accent)!important;font-size:14px} /* Responsive type must match the actual Stafflancer heading: 50 / 40 / 30 px. */ @media(max-width:1000px){:where(.sbl-root) .blog-hero-content h1,:where(.sbl-root) .article-head h1{font-size:40px!important}} @media(max-width:800px){ :where(.sbl-root) .wrap{width:min(100% - 32px,640px)} :where(.sbl-root) .nav{height:72px;gap:9px} :where(.sbl-root) .menu-toggle span{background:var(--st-ink)!important} :where(.sbl-root) .hero{padding:16px 0 34px!important} :where(.sbl-root) .blog-photo-hero{min-height:460px} :where(.sbl-root) .blog-hero-content{min-height:460px;max-width:100%;padding:48px 7%} :where(.sbl-root) .blog-hero-photo{width:74%;object-position:center;opacity:.7} :where(.sbl-root) .blog-hero-overlay{background:linear-gradient(90deg,#100f18 0%,#100f18de 50%,#100f186b 100%)} :where(.sbl-root) .archive-body{padding:46px 0} :where(.sbl-root) .article-hero{padding:35px 0 45px} :where(.sbl-root) .article-head h1{letter-spacing:-.9px!important} :where(.sbl-root) .articletext{font-size:16px} :where(.sbl-root) .articletext h2{font-size:26px} :where(.sbl-root) .articletext h3{font-size:21px} :where(.sbl-root) .article-layout{display:block} :where(.sbl-root) .valueband h2{font-size:31px} } @media(max-width:520px){ :where(.sbl-root) .nav{gap:8px} :where(.sbl-root) .blog-photo-hero{min-height:460px;border-radius:13px} :where(.sbl-root) .blog-hero-content{min-height:460px;padding:42px 24px} :where(.sbl-root) .blog-hero-content h1,:where(.sbl-root) .article-head h1{font-size:30px!important;letter-spacing:-.35px!important;line-height:1.13!important} :where(.sbl-root) .blog-hero-lead{font-size:15px;line-height:1.6;max-width:95%} :where(.sbl-root) .blog-hero-eyebrow{font-size:12px} :where(.sbl-root) .blog-hero-actions{gap:11px} :where(.sbl-root) .blog-primary-link{font-size:14px;min-height:46px;padding:11px 17px} :where(.sbl-root) .blog-hero-photo{width:100%;opacity:.57} :where(.sbl-root) .blog-hero-overlay{background:linear-gradient(90deg,#100f18ed,#100f18a6),linear-gradient(0deg,#100f18da,transparent 80%)} :where(.sbl-root) .article-grid{grid-template-columns:minmax(0,1fr)} :where(.sbl-root) .feature{grid-template-columns:minmax(0,1fr)} :where(.sbl-root) .feature-copy{padding:24px}:where(.sbl-root) .feature-copy h3{font-size:25px} :where(.sbl-root) .filters{gap:16px}:where(.sbl-root) .tabrow{overflow:visible}:where(.sbl-root) .filter{white-space:nowrap} :where(.sbl-root) .sectiontop h2{font-size:29px} :where(.sbl-root) .listen-row{flex-wrap:wrap;gap:14px}:where(.sbl-root) .player-main{flex-basis:calc(100% - 70px);min-width:0} :where(.sbl-root) .player-side{width:100%;display:flex;flex-direction:row;justify-content:flex-end} :where(.sbl-root) .articletext h2{font-size:24px}:where(.sbl-root) .articletext h3{font-size:20px} :where(.sbl-root) .article-cta h2{font-size:24px} } /* On phones, preserve the original banner photo as a visible top panel. */ @media(max-width:520px){ :where(.sbl-root) .blog-photo-hero,:where(.sbl-root) .blog-hero-content{min-height:550px} :where(.sbl-root) .blog-hero-photo{top:0;right:0;width:100%;height:255px;opacity:1;object-fit:cover;object-position:center 32%;filter:brightness(.88) contrast(1.04)} :where(.sbl-root) .blog-hero-overlay{background:linear-gradient(180deg,rgba(16,15,24,.05) 0%,rgba(16,15,24,.3) 24%,#100f18 46%,#100f18 100%)} :where(.sbl-root) .blog-hero-content{justify-content:flex-end;padding:230px 24px 31px} } @media (max-width:360px){:where(.sbl-root) .wrap{width:calc(100% - 24px)}:where(.sbl-root) .blog-hero-content{padding:32px 19px}:where(.sbl-root) .blog-photo-hero{min-height:490px}:where(.sbl-root) .blog-hero-content{min-height:490px}} @media(prefers-reduced-motion:reduce){.sbl-root{scroll-behavior:auto!important}:where(.sbl-root) *,:where(.sbl-root) *::before,:where(.sbl-root) *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}} /* V5 scoped article improvements. Original archive design, WordPress shell simulation, and theme tokens remain unchanged. */ :where(.sbl-root) .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} /* Editorial 50/50 banner with a true featured image slot */ :where(.sbl-root) .article-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--st-bg-soft)!important;border-bottom:1px solid var(--st-border);padding:46px 0 57px!important} :where(.sbl-root) .article-hero::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(ellipse 49% 95% at 91% 14%,rgba(82,9,229,.095),transparent 85%),linear-gradient(112deg,transparent 40%,rgba(137,102,196,.045));} html.sl-theme-dark .sbl-root .article-hero::before,html.sl-theme-dark .sbl-root .article-hero::before,html.sl-theme-dark .sbl-root .article-hero::before{background:radial-gradient(ellipse 60% 100% at 92% 15%,rgba(185,154,255,.12),transparent 80%),linear-gradient(115deg,transparent 45%,rgba(100,75,170,.06))} :where(.sbl-root) .article-hero .crumb{margin-bottom:28px;min-height:30px} :where(.sbl-root) .article-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,3.8vw,55px);align-items:center} :where(.sbl-root) .article-hero-grid > *{min-width:0} :where(.sbl-root) .article-head{max-width:none!important} :where(.sbl-root) .article-head h1{font-size:50px!important;font-weight:800!important;letter-spacing:-1.65px!important;line-height:1.12!important;overflow-wrap:break-word;color:var(--st-ink)!important;margin:0} :where(.sbl-root) .article-head .category{margin-bottom:17px!important;line-height:1.45} :where(.sbl-root) .article-head .deck{font-size:16px;line-height:1.66;margin:21px 0 24px;max-width:590px} :where(.sbl-root) .article-head .authorline{gap:10px;line-height:1.5} :where(.sbl-root) .article-hero-featured{margin:0;position:relative;width:100%;aspect-ratio:6/5;overflow:hidden;border:1px solid var(--st-border);border-radius:20px;background:#e7e0f7;box-shadow:0 18px 48px rgba(45,20,84,.13);isolation:isolate} :where(.sbl-root) .article-hero-featured img{width:100%;height:100%;display:block;object-fit:cover} :where(.sbl-root) .article-hero-featured figcaption{position:absolute;bottom:16px;left:16px;z-index:1;padding:8px 12px;border-radius:99px;background:#211536e8;color:#fff;font-size:12px;font-weight:500;box-shadow:0 5px 18px #0001} :where(.sbl-root) .article-hero-featured::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px #ffffff42} /* Tighter listening experience, no loss of accessibility or speech controls */ :where(.sbl-root) .listen{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:15px;padding:14px 16px!important;min-height:104px!important;border-radius:15px;margin:0 0 28px!important;position:relative} :where(.sbl-root) .listen .player-btn{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;flex-basis:48px!important} :where(.sbl-root) .listen .player-btn svg{width:22px;height:22px} :where(.sbl-root) .listen-main{min-width:0;display:grid;gap:6px} :where(.sbl-root) .listen-intro{display:flex;flex-wrap:wrap;align-items:center;gap:12px;line-height:1.2} :where(.sbl-root) .listen-label{font-size:11px;letter-spacing:.85px;font-weight:600;color:var(--st-audio-text)} :where(.sbl-root) .listen-subtext{font-size:12px;color:var(--st-muted)} :where(.sbl-root) .listen-title{font-size:14px;font-weight:500;line-height:1.2;color:var(--st-ink)} :where(.sbl-root) .listen-progress-row{display:flex;align-items:center;gap:9px} :where(.sbl-root) .listen .track{height:5px;flex:1;min-width:25px} :where(.sbl-root) .listen-timer{color:var(--st-muted);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap} :where(.sbl-root) .listen-controls{display:flex;align-items:center;gap:7px} :where(.sbl-root) .listen-controls select{font-size:13px;min-height:44px;min-width:71px;border:1px solid var(--st-border);background:var(--st-paper);color:var(--st-ink);border-radius:9px;padding:7px 10px} :where(.sbl-root) .listen .stop-btn{font-size:13px;font-weight:500;min-height:44px;min-width:54px;border-radius:8px;border:1px solid transparent;padding:7px 12px;color:var(--st-audio-text)} :where(.sbl-root) .listen .stop-btn:hover{background:var(--st-soft-accent);border-color:var(--st-audio-border)} :where(.sbl-root) .listen .listen-status.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} /* Generated TOC, optional nested H3, one active link and a left-side indicator */ :where(.sbl-root) .left-rail .toclist{gap:2px;max-height:min(75vh,650px);overflow-y:auto;scrollbar-width:thin} :where(.sbl-root) .toclist a{display:flex;align-items:center;min-height:43px;padding:7px 11px 7px 13px;margin-left:-1px;border-left:2px solid transparent;line-height:1.4;font-size:14px;transition:background-color .15s ease,color .15s ease} :where(.sbl-root) .toclist a.on{background:var(--st-soft-accent);color:var(--st-accent)!important;border-left-color:var(--st-accent);font-weight:600} :where(.sbl-root) .toclist a:hover{background:var(--st-bg-soft);color:var(--st-accent)!important} :where(.sbl-root) .toclist .toc-h3{padding-left:21px;font-size:13px} :where(.sbl-root) .toc-subtoggle{margin-top:12px;padding:9px 11px;min-height:42px;border:1px solid var(--st-border);background:var(--st-paper);color:var(--st-ink);border-radius:9px;font-size:13px;font-weight:500} :where(.sbl-root) .toc-subtoggle:hover{border-color:var(--st-accent)} :where(.sbl-root) .mobile-toc{display:none;border:1px solid var(--st-border);background:var(--st-paper);border-radius:12px;margin-bottom:19px;overflow:hidden} :where(.sbl-root) .mobile-toc summary{display:list-item;cursor:pointer;padding:14px 18px;font-size:15px;color:var(--st-ink);font-weight:600;min-height:48px} :where(.sbl-root) .mobile-toc nav{padding:4px 16px 8px} :where(.sbl-root) .mobile-toc .toc-subtoggle{margin:3px 16px 16px} :where(.sbl-root) #articleText [tabindex="-1"]:focus{outline:none} :where(.sbl-root) #articleText h2,:where(.sbl-root) #articleText h3,:where(.sbl-root) #articleText #intro{scroll-margin-top:112px} @media(max-width:1100px){:where(.sbl-root) .article-hero-grid{gap:26px}:where(.sbl-root) .article-head h1{font-size:45px!important}:where(.sbl-root) .article-hero-featured{aspect-ratio:6/6}:where(.sbl-root) .article-hero{padding:35px 0 48px!important}} @media(max-width:1000px){:where(.sbl-root) .article-head h1{font-size:40px!important}:where(.sbl-root) .article-head .deck{font-size:15px}} @media(max-width:800px){:where(.sbl-root) .article-hero-grid{grid-template-columns:minmax(0,1fr);gap:24px}:where(.sbl-root) .article-hero-featured{aspect-ratio:16/10;max-height:340px}:where(.sbl-root) .article-hero{padding:30px 0 40px!important}:where(.sbl-root) .article-hero .crumb{margin-bottom:18px}:where(.sbl-root) .mobile-toc{display:block}:where(.sbl-root) .left-rail{display:none}:where(.sbl-root) .listen{grid-template-columns:48px minmax(0,1fr) auto;gap:13px}:where(.sbl-root) .article-head h1{font-size:40px!important}:where(.sbl-root) .article-head .deck{font-size:16px}} @media(max-width:520px){:where(.sbl-root) .article-head h1{font-size:30px!important;letter-spacing:-.65px!important}:where(.sbl-root) .article-head .category{margin-bottom:13px!important}:where(.sbl-root) .article-head .deck{font-size:15px;margin:15px 0 16px}:where(.sbl-root) .article-head .authorline{font-size:12px;gap:7px}:where(.sbl-root) .article-hero-featured{aspect-ratio:16/11;border-radius:14px}:where(.sbl-root) .article-hero-featured figcaption{font-size:11px;bottom:11px;left:11px}:where(.sbl-root) .listen{padding:12px!important;min-height:119px!important;grid-template-columns:46px minmax(0,1fr);gap:10px}:where(.sbl-root) .listen .player-btn{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important}:where(.sbl-root) .listen-main{gap:6px}:where(.sbl-root) .listen-subtext{display:none}:where(.sbl-root) .listen-controls{grid-column:2;justify-content:flex-start;gap:12px}:where(.sbl-root) .listen-controls select,:where(.sbl-root) .listen-controls button{min-height:44px!important}:where(.sbl-root) .listen-label{font-size:11px}:where(.sbl-root) .listen-title{font-size:13px}} @media(max-width:360px){:where(.sbl-root) .article-hero-grid{gap:17px}:where(.sbl-root) .listen{grid-template-columns:42px minmax(0,1fr)}:where(.sbl-root) .listen .player-btn{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important}:where(.sbl-root) .article-head h1{font-size:30px!important}} @media(prefers-reduced-motion:reduce){:where(.sbl-root) .toclist a{transition:none}} /* V6: Stafflancer editorial refinements - article only, archive unchanged. */ /* Full article banner has one unified purple visual background; the floated illustration is transparent and is not enclosed in a separate color tile. */ :where(.sbl-root).sbl-single .article-hero{ overflow:hidden;isolation:isolate;position:relative; background:linear-gradient(105deg,#f7f6fc 0%,#f2eefc 30%,#e8defa 57%,#d4c5f5 78%,#bba5eb 100%)!important; border-bottom:1px solid #ddd2ef; padding-top:44px!important;padding-bottom:46px!important; } :where(.sbl-root).sbl-single .article-hero::before{ content:"";position:absolute;z-index:-1;inset:0;pointer-events:none; background-image:linear-gradient(#ffffff50 1px,transparent 1px),linear-gradient(90deg,#ffffff50 1px,transparent 1px); background-size:46px 46px;mask-image:linear-gradient(90deg,transparent 12%,#0004 48%,#000c 100%); } :where(.sbl-root).sbl-single .article-hero::after{ content:"";position:absolute;z-index:-1;right:-135px;top:-280px; border-radius:50%;width:min(52vw,700px);aspect-ratio:1; background:#ffffff38;box-shadow:-760px 640px 0 -225px #ffffff18; pointer-events:none; } :where(.sbl-root).sbl-single .article-hero .wrap{position:relative;z-index:1} :where(.sbl-root).sbl-single .article-hero .article-hero-featured{ border:none;box-shadow:none;border-radius:0;overflow:visible; background:transparent;aspect-ratio:6/5; } :where(.sbl-root).sbl-single .article-hero .article-hero-featured::after{display:none} :where(.sbl-root).sbl-single .article-hero .article-hero-featured img{object-fit:contain;transform:scale(1.06);transform-origin:center center} :where(.sbl-root).sbl-single .article-hero .crumb,:where(.sbl-root).sbl-single .article-hero .deck,:where(.sbl-root).sbl-single .article-hero .authorline{color:#4d4262} :where(.sbl-root).sbl-single .article-hero .crumb a{color:#332741} :where(.sbl-root).sbl-single .article-hero .article-head h1{color:#1d1728!important} :where(.sbl-root).sbl-single .article-hero .authorline strong{color:#221730} :where(.sbl-root).sbl-single .article-hero .sep{background:#7b6c93} :where(.sbl-root).sbl-single .article-hero .article-head .category{color:#4c0cd9} :where(.sbl-root).sbl-single .article-hero .topnote{color:#4813a8;background:#ede4ff;border-color:#dac6fb} /* Dark mode is inherited from the shared site and simulated in this prototype. */ html.sl-theme-dark .sbl-root.sbl-single .article-hero,html.sl-theme-dark .sbl-root.sbl-single .article-hero,html.sl-theme-dark .sbl-root.sbl-single .article-hero{ background:linear-gradient(105deg,#171125 0%,#271c3f 34%,#39265b 60%,#503779 80%,#654b90 100%)!important; border-bottom-color:#4a3365; } html.sl-theme-dark .sbl-root.sbl-single .article-hero::before,html.sl-theme-dark .sbl-root.sbl-single .article-hero::before,html.sl-theme-dark .sbl-root.sbl-single .article-hero::before{ background-image:linear-gradient(#ffffff13 1px,transparent 1px),linear-gradient(90deg,#ffffff13 1px,transparent 1px); } html.sl-theme-dark .sbl-root.sbl-single .article-hero::after,html.sl-theme-dark .sbl-root.sbl-single .article-hero::after,html.sl-theme-dark .sbl-root.sbl-single .article-hero::after{background:#ffffff10;box-shadow:-760px 640px 0 -225px #ffffff06} html.sl-theme-dark .sbl-root.sbl-single .article-hero .article-head h1,html.sl-theme-dark .sbl-root.sbl-single .article-hero .article-head h1,html.sl-theme-dark .sbl-root.sbl-single .article-hero .article-head h1{color:#fff!important} html.sl-theme-dark .sbl-root.sbl-single .article-hero .crumb,html.sl-theme-dark .sbl-root.sbl-single .article-hero .deck,html.sl-theme-dark .sbl-root.sbl-single .article-hero .authorline,html.sl-theme-dark .sbl-root.sbl-single .article-hero .crumb,html.sl-theme-dark .sbl-root.sbl-single .article-hero .deck,html.sl-theme-dark .sbl-root.sbl-single .article-hero .authorline,html.sl-theme-dark .sbl-root.sbl-single .article-hero .crumb,html.sl-theme-dark .sbl-root.sbl-single .article-hero .deck,html.sl-theme-dark .sbl-root.sbl-single .article-hero .authorline{color:#e5ddef} html.sl-theme-dark .sbl-root.sbl-single .article-hero .authorline strong,html.sl-theme-dark .sbl-root.sbl-single .article-hero .crumb a,html.sl-theme-dark .sbl-root.sbl-single .article-hero .authorline strong,html.sl-theme-dark .sbl-root.sbl-single .article-hero .crumb a,html.sl-theme-dark .sbl-root.sbl-single .article-hero .authorline strong,html.sl-theme-dark .sbl-root.sbl-single .article-hero .crumb a{color:#fff} html.sl-theme-dark .sbl-root.sbl-single .article-hero .article-head .category,html.sl-theme-dark .sbl-root.sbl-single .article-hero .article-head .category,html.sl-theme-dark .sbl-root.sbl-single .article-hero .article-head .category{color:#dcc7ff} /* Slim, three-part audio row: play/pause | centrally aligned bar | speed. */ :where(.sbl-root).sbl-single .listen{ display:grid;grid-template-columns:48px minmax(0,1fr) auto; align-items:center;gap:17px;padding:13px 19px!important; min-height:80px!important;margin-bottom:27px!important; } :where(.sbl-root).sbl-single .listen .player-btn{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important} :where(.sbl-root).sbl-single .listen-main{display:flex;flex-direction:column;justify-content:center;gap:7px;min-width:0;transform:translateY(-6px)} :where(.sbl-root).sbl-single .listen-label{line-height:1.15;font-size:11px;letter-spacing:.95px;font-weight:600} :where(.sbl-root).sbl-single .listen-progress-row{width:100%;display:flex;align-items:center;gap:10px;min-height:16px} :where(.sbl-root).sbl-single .listen-progress-row .track{margin:0!important;align-self:center;flex:1;height:5px;min-width:24px} :where(.sbl-root).sbl-single .listen-timer{min-width:33px;text-align:right;font-variant-numeric:tabular-nums;font-size:12px} :where(.sbl-root).sbl-single .listen-controls{display:flex;align-items:center} :where(.sbl-root).sbl-single .listen-controls select{height:46px;min-height:46px;min-width:82px;max-width:92px} :where(.sbl-root).sbl-single .article-cta .eyebrow{color:#fff!important;opacity:1!important} :where(.sbl-root).sbl-single .article-cta .eyebrow::before,:where(.sbl-root).sbl-single .article-cta .eyebrow .dot{color:#fff} /* H2-only table of contents; no nested links or subsection controls. */ :where(.sbl-root).sbl-single .toc-subtoggle,:where(.sbl-root).sbl-single .toc-h3{display:none!important} @media(max-width:800px){ :where(.sbl-root).sbl-single .article-hero{padding:29px 0 35px!important} :where(.sbl-root).sbl-single .article-hero-grid{gap:14px} :where(.sbl-root).sbl-single .article-hero .article-hero-featured{aspect-ratio:16/9;max-height:340px} :where(.sbl-root).sbl-single .article-hero .article-hero-featured img{transform:scale(1.02)} } @media(max-width:520px){ :where(.sbl-root).sbl-single .article-hero{padding:25px 0 31px!important} :where(.sbl-root).sbl-single .article-hero .article-hero-featured{aspect-ratio:16/10} :where(.sbl-root).sbl-single .listen{grid-template-columns:46px minmax(0,1fr) auto;gap:9px;padding:12px!important;min-height:73px!important} :where(.sbl-root).sbl-single .listen .player-btn{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important} :where(.sbl-root).sbl-single .listen-main{gap:7px} :where(.sbl-root).sbl-single .listen-controls{grid-column:auto!important;justify-content:flex-end} :where(.sbl-root).sbl-single .listen-controls select{min-height:46px!important;height:46px;min-width:65px;max-width:76px;padding:7px 5px} :where(.sbl-root).sbl-single .listen-label{font-size:10px;letter-spacing:.15px} :where(.sbl-root).sbl-single .listen-progress-row{gap:5px} :where(.sbl-root).sbl-single .listen-timer{font-size:11px;min-width:25px} } @media(max-width:359px){ :where(.sbl-root).sbl-single .listen{grid-template-columns:44px minmax(0,1fr) auto;gap:7px;padding:10px!important} :where(.sbl-root).sbl-single .listen .player-btn{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important} :where(.sbl-root).sbl-single .listen-controls select{min-width:62px;max-width:68px} } /* V7: compact playback-speed selector with a separate accessible Stop button. */ :where(.sbl-root).sbl-single .listen-controls{display:flex;flex-direction:row;align-items:center;gap:8px;min-width:0} :where(.sbl-root).sbl-single .listen-controls select{box-sizing:border-box;width:72px;min-width:72px!important;max-width:72px!important;height:44px!important;min-height:44px!important;padding:7px 6px!important;font-size:13px;flex:0 0 72px} :where(.sbl-root).sbl-single .listen-controls .stop-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:56px;min-height:44px;height:44px;padding:0 11px;flex:0 0 auto;background:var(--st-paper);border:1px solid var(--st-border);border-radius:9px;color:var(--st-ink);font-family:Inter,Arial,sans-serif;font-size:13px;font-weight:500;line-height:1} :where(.sbl-root).sbl-single .listen-controls .stop-btn:hover{border-color:#7647ed;background:var(--st-soft-accent);color:var(--st-ink)} :where(.sbl-root).sbl-single .listen-controls .stop-btn:focus-visible,:where(.sbl-root).sbl-single .listen-controls select:focus-visible{outline:3px solid #7541e6;outline-offset:3px} @media(max-width:520px){ :where(.sbl-root).sbl-single .listen{gap:8px!important} :where(.sbl-root).sbl-single .listen-controls{gap:6px} :where(.sbl-root).sbl-single .listen-controls select{width:62px;min-width:62px!important;max-width:62px!important;flex-basis:62px;padding:6px 3px!important;font-size:12px} :where(.sbl-root).sbl-single .listen-controls .stop-btn{min-width:48px;min-height:44px;height:44px;padding:0 7px;font-size:12px} } @media(max-width:359px){ :where(.sbl-root).sbl-single .listen{gap:6px!important} :where(.sbl-root).sbl-single .listen-controls{gap:4px} :where(.sbl-root).sbl-single .listen-controls select{width:58px;min-width:58px!important;max-width:58px!important;flex-basis:58px} :where(.sbl-root).sbl-single .listen-controls .stop-btn{min-width:46px} } :where(.sbl-root) .v8-author{--paper:var(--st-paper);--ink:var(--st-ink);--muted:var(--st-muted);--line:var(--st-border);--accent:var(--st-accent);--wash:var(--st-soft-accent);--shadow:var(--st-shadow);margin-top:38px;text-align:left} :where(.sbl-root) .v8-author{position:relative;isolation:isolate;border:1px solid var(--line);border-radius:24px;background:var(--paper);box-shadow:var(--shadow);overflow:hidden} :where(.sbl-root) .v8-author:before{content:"";position:absolute;top:0;left:36px;right:36px;height:2px;background:linear-gradient(90deg,var(--accent),#c6aafa 58%,transparent);opacity:.85} :where(.sbl-root) .v8-author-main{display:grid;grid-template-columns:88px minmax(0,1fr);gap:26px;padding:36px 36px 29px;align-items:start} :where(.sbl-root) .v8-author-portrait{width:88px;height:88px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#eee7fc,#d6c3f3);color:#482479;font-family:Georgia,serif;font-size:30px;letter-spacing:-2px;box-shadow:0 0 0 5px var(--paper),0 0 0 6px var(--line);margin-top:3px;position:relative} :where(.sbl-root) .v8-author-portrait:after{content:"";width:13px;height:13px;position:absolute;bottom:3px;right:3px;background:#5209e5;border:3px solid var(--paper);border-radius:50%} :where(.sbl-root) .v8-author-label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:10px;line-height:1.4;font-weight:650;letter-spacing:1.7px;text-transform:uppercase;margin:0 0 9px} :where(.sbl-root) .v8-author-name{font-size:26px;line-height:1.2;font-weight:600;letter-spacing:-.9px;margin:0;color:var(--ink)} :where(.sbl-root) .v8-author-company{font-size:12px;color:var(--accent);font-weight:550;margin:7px 0 17px;display:flex;align-items:center;gap:7px}:where(.sbl-root) .v8-author-company span{width:3px;height:3px;border-radius:50%;background:var(--muted)} :where(.sbl-root) .v8-author-bio{font-size:15px;line-height:1.8;color:var(--muted);margin:0;max-width:490px;text-wrap:pretty} :where(.sbl-root) .v8-author-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:18px 36px;background:linear-gradient(105deg,var(--wash),var(--paper))} :where(.sbl-root) .v8-author-link{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:600;color:var(--ink);min-height:30px}:where(.sbl-root) .v8-author-link svg{width:15px;height:15px;color:var(--accent);transition:transform .18s}:where(.sbl-root) .v8-author-link:hover svg{transform:translate(2px,-2px)} :where(.sbl-root) .v8-author-contact{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);min-height:30px}:where(.sbl-root) .v8-author-contact svg{width:15px;height:15px}:where(.sbl-root) .v8-author-contact:hover{color:var(--accent)} :where(.sbl-root) .v8-author a{color:inherit;text-decoration:none}:where(.sbl-root) .v8-author-name{color:var(--st-ink)!important;font-family:Inter,Arial,sans-serif!important}:where(.sbl-root) .v8-author-bio{color:var(--st-muted)!important}:where(.sbl-root) .v8-author-company{color:var(--st-accent)!important} @media(max-width:560px){:where(.sbl-root) .v8-author-main{grid-template-columns:64px minmax(0,1fr);padding:27px 23px;gap:18px}:where(.sbl-root) .v8-author-portrait{width:64px;height:64px;font-size:24px}:where(.sbl-root) .v8-author-info{display:contents}:where(.sbl-root) .v8-author-heading{align-self:center}:where(.sbl-root) .v8-author-name{font-size:22px}:where(.sbl-root) .v8-author-label{font-size:9px;letter-spacing:1.1px}:where(.sbl-root) .v8-author-company{margin-bottom:0;font-size:11px;flex-wrap:wrap}:where(.sbl-root) .v8-author-bio{grid-column:1/-1;font-size:14px}:where(.sbl-root) .v8-author-footer{padding:16px 23px;flex-direction:column;align-items:flex-start;gap:8px}} :where(.sbl-root) .archive-intro{background:var(--st-bg-soft);border-bottom:1px solid var(--st-border);padding:38px 0 53px}:where(.sbl-root) .archive-intro .backtiny{display:inline-block;margin-bottom:33px;font-size:12px;color:var(--st-muted)}:where(.sbl-root) .archive-kicker{font-size:11px;letter-spacing:1.8px;color:var(--st-accent);font-weight:600;margin-bottom:14px}:where(.sbl-root) .archive-intro h1{font-size:clamp(32px,4vw,50px);font-weight:700;line-height:1.14;letter-spacing:-1.6px;max-width:850px;margin:0 0 20px;color:var(--st-ink)}:where(.sbl-root) .archive-lead{font-size:16px;line-height:1.8;max-width:670px;margin:0;color:var(--st-muted)}:where(.sbl-root) .archive-content{padding-top:35px;padding-bottom:70px}:where(.sbl-root) .archive-controls{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:25px}:where(.sbl-root) .archive-controls label{display:block;font-size:11px;font-weight:600;color:var(--st-muted);margin-bottom:9px}:where(.sbl-root) .archive-controls select,:where(.sbl-root) .archive-controls input{font:inherit;font-size:13px;color:var(--st-ink);background:var(--st-paper);border:1px solid var(--st-border);padding:12px 16px;border-radius:11px;min-height:46px}:where(.sbl-root) .archive-controls select{max-width:100%}:where(.sbl-root) .archive-controls form{width:min(420px,55%)}:where(.sbl-root) .archive-search-line{display:flex;gap:8px}:where(.sbl-root) .archive-search-line input{width:100%;min-width:0}:where(.sbl-root) .archive-search-line button{background:var(--st-accent);color:var(--st-accent-ink);border:0;border-radius:11px;font-size:12px;font-weight:600;padding:0 20px;white-space:nowrap}:where(.sbl-root) .archive-summary{display:flex;justify-content:space-between;font-size:12px;color:var(--st-muted);margin-bottom:23px}:where(.sbl-root) .archive-pagination{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:38px}:where(.sbl-root) .archive-pagination button{min-height:44px;min-width:44px;padding:8px 14px;border:1px solid var(--st-border);border-radius:99px;background:var(--st-paper);color:var(--st-ink);font-size:12px}:where(.sbl-root) .archive-pagination button[aria-current=page]{background:var(--st-accent);color:var(--st-accent-ink);border-color:var(--st-accent)}:where(.sbl-root) .archive-empty{text-align:center;border:1px solid var(--st-border);background:var(--st-bg-soft);border-radius:20px;padding:52px 24px}:where(.sbl-root) .archive-empty>span{font-size:44px;color:var(--st-accent)}:where(.sbl-root) .archive-empty h2{font-weight:600;letter-spacing:-.6px}:where(.sbl-root) .archive-empty p{color:var(--st-muted);font-size:14px;line-height:1.8;margin-bottom:24px}:where(.sbl-root) .archive-disclaimer{font-size:11px;line-height:1.8;color:var(--st-muted);margin-top:34px;max-width:850px}:where(.sbl-root) .archive-card-title{font-size:21px;font-weight:600;line-height:1.3;letter-spacing:-.6px;margin:14px 0}:where(.sbl-root) .archive-card-title a{color:var(--st-ink)} @media(max-width:800px){:where(.sbl-root) .archive-intro{padding:28px 0 38px}:where(.sbl-root) .archive-intro h1{font-size:34px}:where(.sbl-root) .archive-controls{flex-direction:column;align-items:stretch}:where(.sbl-root) .archive-controls form{width:100%}:where(.sbl-root) .archive-controls select{width:100%}:where(.sbl-root) .archive-content{padding-top:25px}} /* R02 author profiles and sharing */ :where(.sbl-root) .screen [hidden]{display:none!important} :where(.sbl-root) .v8-author-socials{display:flex;align-items:center;gap:9px;margin-top:19px;flex-wrap:wrap}:where(.sbl-root) .social-profile,:where(.sbl-root) .share-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:42px;height:42px;padding:0;border:1px solid var(--st-border);border-radius:12px;background:var(--st-paper);color:var(--st-muted);cursor:pointer;transition:color .18s,background .18s,border-color .18s,transform .18s}:where(.sbl-root) .social-profile svg,:where(.sbl-root) .share-button svg{width:18px;height:18px;display:block}:where(.sbl-root) .social-profile:hover,:where(.sbl-root) .share-button:hover{color:var(--st-accent);border-color:var(--st-accent);background:var(--st-soft-accent);transform:translateY(-2px)}:where(.sbl-root) .social-profile:focus-visible,:where(.sbl-root) .share-button:focus-visible{outline:3px solid var(--st-accent);outline-offset:4px}:where(.sbl-root) .social-demo-status:empty{display:none}:where(.sbl-root) .social-demo-status{font-size:11px!important;line-height:1.7!important;color:var(--st-muted)!important;margin:12px 0 0!important}:where(.sbl-root) .v8-author[hidden],:where(.sbl-root) .social-profile[hidden],:where(.sbl-root) .share-button[hidden],:where(.sbl-root) .share-strip[hidden],:where(.sbl-root) .share-floating[hidden]{display:none!important} :where(.sbl-root) .share-strip{margin-top:38px;padding:23px 0 25px;border-block:1px solid var(--st-border)}:where(.sbl-root) .share-overline{font-size:9px;letter-spacing:1.7px;color:var(--st-accent);font-weight:650}:where(.sbl-root) .share-copy h2{font:550 18px/1.4 Inter,Arial,sans-serif!important;letter-spacing:-.4px;margin:6px 0 17px!important;color:var(--st-ink)!important}:where(.sbl-root) .share-buttons{display:flex;gap:9px;flex-wrap:wrap}:where(.sbl-root) .share-button{width:44px;height:44px}:where(.sbl-root) .share-floating{position:fixed;left:12px;top:36%;z-index:25;padding:8px;border:1px solid var(--st-border);border-radius:18px;background:var(--st-paper);box-shadow:var(--st-shadow)}:where(.sbl-root) .share-floating .share-buttons{flex-direction:column;gap:7px}:where(.sbl-root) .share-floating .share-button{width:36px;height:36px}:where(.sbl-root) .share-floating .share-button svg{width:16px;height:16px}:where(.sbl-root).sbl-single[data-share-position=inline] .share-floating{display:none}:where(.sbl-root).sbl-single[data-share-position=floating]>.article-body-wrap .share-strip{display:none}@media(max-width:1130px){:where(.sbl-root) .share-floating{display:none}:where(.sbl-root).sbl-single[data-share-position=floating]>.article-body-wrap .share-strip:not([hidden]){display:block}}:where(.sbl-root) .backend-screen{background:#f4f5f8;color:#222331}:where(.sbl-root) .backend-screen *{box-sizing:border-box}:where(.sbl-root) .backend-screen [hidden]{display:none!important}:where(.sbl-root) .wp-demo-bar{background:#20232b;color:#d8dbe3;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:9px 24px;font-size:11px}:where(.sbl-root) .wp-demo-bar b{border:1px solid #8a8e99;border-radius:50%;font:13px Georgia,serif;display:inline-grid;place-items:center;width:20px;height:20px;margin-right:9px}:where(.sbl-root) .wp-demo-bar span:last-child{color:#aeb3c0}:where(.sbl-root) .menu-icon{width:18px;font-size:19px;font-weight:400;text-align:center}:where(.sbl-root) .status-dot{display:inline-block;width:5px;height:5px;background:#4d9574;border-radius:50%;margin-right:6px}:where(.sbl-root) .panel-heading{margin-bottom:28px}:where(.sbl-root) .panel-heading>p{margin:0 0 11px;font-size:9px;font-weight:700;letter-spacing:1.9px;color:#774abb}:where(.sbl-root) .panel-heading h2{font:600 clamp(25px,2.7vw,34px)/1.2 Inter,Arial,sans-serif;color:#202331;margin:0 0 11px;letter-spacing:-1.1px}:where(.sbl-root) .panel-heading>span{font-size:12px;color:#6e7483;line-height:1.8;display:block}:where(.sbl-root) .setting-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(170px,1fr);gap:28px;align-items:center;padding:21px 27px;border-bottom:1px solid #f1f2f6}:where(.sbl-root) .setting-row:last-child{border-bottom:0}:where(.sbl-root) .setting-row>div>label{font-size:12px;font-weight:550;color:#45495a}:where(.sbl-root) .setting-row p{font-size:10px;line-height:1.8;color:#6e7483;margin:5px 0 0;max-width:370px}:where(.sbl-root) .setting-control{display:flex;align-items:center;gap:9px;justify-content:flex-end;min-width:0}:where(.sbl-root) .backend-screen input:not([type=checkbox]),:where(.sbl-root) .backend-screen select{max-width:100%;border:1px solid #e1e3ec;border-radius:8px;color:#454859;background:#fff;padding:10px 12px;font:400 11px/1.5 Inter,Arial,sans-serif;min-height:40px}:where(.sbl-root) .backend-screen select{width:100%}:where(.sbl-root) .backend-screen input[type=number]{width:78px}:where(.sbl-root) .backend-screen input:focus-visible,:where(.sbl-root) .backend-screen select:focus-visible,:where(.sbl-root) .backend-screen button:focus-visible{outline:3px solid #9c79f4;outline-offset:3px}:where(.sbl-root) .unit{font-size:10px;color:#6e7483}:where(.sbl-root) .column-fields{display:flex;gap:10px;max-width:100%}:where(.sbl-root) .column-fields label{display:flex;flex-direction:column;font-size:9px;color:#6e7483;gap:5px}:where(.sbl-root) .column-fields input[type=number]{width:65px}:where(.sbl-root) .switch{display:inline-flex;position:relative;align-items:center;width:35px;min-width:35px;height:21px;cursor:pointer}:where(.sbl-root) .switch input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;margin:0}:where(.sbl-root) .switch>span:not(.sr-only){width:35px;height:21px;background:#d9dce6;border-radius:20px;transition:background .18s;pointer-events:none}:where(.sbl-root) .switch>span:not(.sr-only):after{content:"";display:block;position:absolute;left:3px;top:3px;width:15px;height:15px;background:white;border-radius:50%;box-shadow:0 1px 3px #0002;transition:transform .18s}:where(.sbl-root) .switch input:checked+span{background:#6732e9}:where(.sbl-root) .switch input:checked+span:after{transform:translateX(14px)}:where(.sbl-root) .switch input:focus-visible+span{outline:3px solid #c8b2fa;outline-offset:3px}:where(.sbl-root) .network-checks,:where(.sbl-root) .category-checks{border:0;margin:0;padding:24px 27px;display:flex;flex-wrap:wrap;gap:11px}:where(.sbl-root) .network-checks legend,:where(.sbl-root) .category-checks legend{float:left;width:100%;font-size:12px;color:#45495a;font-weight:550;margin-bottom:15px}:where(.sbl-root) .network-checks label{display:flex;align-items:center;gap:7px;border:1px solid #e7e8ef;border-radius:9px;padding:10px 12px;font-size:10px;color:#626778;min-height:42px}:where(.sbl-root) .network-checks svg{width:14px;height:14px}:where(.sbl-root) .network-checks input,:where(.sbl-root) .category-checks input{accent-color:#6732e9}:where(.sbl-root) .category-checks{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}:where(.sbl-root) .category-checks legend{grid-column:1/-1}:where(.sbl-root) .category-checks label{display:flex;align-items:center;gap:9px;font-size:11px;min-height:37px;color:#616677}:where(.sbl-root) .category-checks small{margin-left:auto;font-size:10px;color:#6e7483}:where(.sbl-root) .overview-links{display:grid;grid-template-columns:1fr}:where(.sbl-root) .overview-links button{font:500 12px Inter,Arial,sans-serif;padding:21px 27px;display:flex;justify-content:space-between;background:none;border:0;border-bottom:1px solid #f0f1f5;color:#575d6f;text-align:left;cursor:pointer}:where(.sbl-root) .overview-links button:last-child{border-bottom:0}:where(.sbl-root) .overview-links span{color:#7b52d8}:where(.sbl-root) .overview-links button:hover{background:#faf8ff}:where(.sbl-root) .config-summary{padding:5px 27px;margin:0}:where(.sbl-root) .config-summary>div{display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid #f0f1f5;padding:17px 0;font-size:11px}:where(.sbl-root) .config-summary>div:last-child{border-bottom:0}:where(.sbl-root) .config-summary dt{color:#6e7483}:where(.sbl-root) .config-summary dd{color:#50576a;margin:0;text-align:right;overflow-wrap:anywhere}:where(.sbl-root) .migration-list{padding:8px 27px 15px;margin:0;list-style:none}:where(.sbl-root) .migration-list li{font-size:11px;color:#72798a;padding:14px 0;border-bottom:1px solid #f0f1f5;line-height:1.7;display:flex;gap:15px;align-items:start}:where(.sbl-root) .migration-list li:last-child{border-bottom:0}:where(.sbl-root) .migration-list span{font-size:9px;border-radius:5px;padding:2px 6px;background:#f0ebfd;color:#8a6abd;flex:0 0 auto} :where(.sbl-root) #articleGrid{grid-template-columns:repeat(var(--blog-desktop,3),minmax(0,1fr));gap:var(--blog-gap,22px)}:where(.sbl-root) #archiveGrid{grid-template-columns:repeat(var(--archive-desktop,3),minmax(0,1fr));gap:var(--archive-gap,22px)} @media(max-width:1130px){:where(.sbl-root) #articleGrid{grid-template-columns:repeat(var(--blog-tablet,2),minmax(0,1fr))}:where(.sbl-root) #archiveGrid{grid-template-columns:repeat(var(--archive-tablet,2),minmax(0,1fr))}} @media(max-width:950px){:where(.sbl-root) .setting-row{gap:15px;padding:19px 20px}:where(.sbl-root) .column-fields{gap:6px}:where(.sbl-root) .column-fields input[type=number]{width:52px}} @media(max-width:650px){:where(.sbl-root) .wp-demo-bar{padding:9px 16px}:where(.sbl-root) .wp-demo-bar span:last-child{font-size:9px;text-align:right}:where(.sbl-root) .setting-row{grid-template-columns:1fr;gap:13px}:where(.sbl-root) .setting-control{justify-content:flex-start}:where(.sbl-root) .setting-row:has(.switch){grid-template-columns:minmax(0,1fr) 35px;gap:16px}:where(.sbl-root) .setting-row .column-fields{width:100%;gap:12px}:where(.sbl-root) .column-fields input[type=number]{width:75px}:where(.sbl-root) .category-checks{grid-template-columns:1fr;padding:21px 20px}:where(.sbl-root) .network-checks{padding:21px 20px}:where(.sbl-root) .config-summary{padding:5px 20px}:where(.sbl-root) .config-summary>div{font-size:10px;gap:15px}:where(.sbl-root) .panel-heading h2{font-size:28px}:where(.sbl-root) .share-strip{margin-top:30px}:where(.sbl-root) .share-buttons{gap:7px}:where(.sbl-root) .share-button{width:40px;height:40px}:where(.sbl-root) .v8-author-socials,:where(.sbl-root) .v8-author-info>.social-demo-status{grid-column:1/-1;margin-top:0}:where(.sbl-root) .v8-author-socials{margin-top:-2px}:where(.sbl-root) .v8-author-main{row-gap:20px}:where(.sbl-root) .share-copy h2{font-size:17px!important}} @media(max-width:530px){:where(.sbl-root) #articleGrid{grid-template-columns:repeat(var(--blog-mobile,1),minmax(0,1fr))}:where(.sbl-root) #archiveGrid{grid-template-columns:repeat(var(--archive-mobile,1),minmax(0,1fr))}} @media(prefers-reduced-motion:reduce){:where(.sbl-root) .social-profile,:where(.sbl-root) .share-button,:where(.sbl-root) .switch>span{transition:none}} /* Backend navigation runs across the top at every screen size. */ @media(max-width:800px){} @media(max-width:650px){} :where(.sbl-root) .manual-heading{padding:22px 27px}:where(.sbl-root) .manual-heading h4{font:600 13px Inter,Arial,sans-serif;margin:0 0 9px;color:#45495a}:where(.sbl-root) .manual-heading p{font-size:11px;line-height:1.8;color:#6e7483;margin:0}:where(.sbl-root) .hero-breadcrumb-category{color:inherit}:where(.sbl-root) .article-head .category a{color:inherit}:where(.sbl-root) .article-head .category a:hover{text-decoration:underline;text-underline-offset:4px}:where(.sbl-root) .category-label-separator{margin:0 9px}:where(.sbl-root) .home-empty{grid-column:1/-1;padding:35px 20px;border:1px solid var(--st-border);border-radius:16px;background:var(--st-bg-soft);font-size:14px;color:var(--st-muted);text-align:center}:where(.sbl-root) .filter[hidden],:where(.sbl-root) .filters .tabrow[hidden]{display:none!important}:where(.sbl-root) .filter{white-space:normal;text-align:center}:where(.sbl-root) .filters .tabrow{flex:1;min-width:0} @media(max-width:650px){:where(.sbl-root) .manual-heading{padding:20px}:where(.sbl-root) .category-label-separator{margin:0 6px}} /* Shared by the approved HTML preview and the standalone blog template. * Round the actual media, regardless of the uploaded file or its dimensions. */ :where(.sbl-root) :is(.sbl-single, .sbl-single) .article-hero .article-hero-featured { border-radius: 20px; overflow: hidden; } :where(.sbl-root) :is(.sbl-single, .sbl-single) .article-hero .article-hero-featured picture { display: block; width: 100%; height: 100%; border-radius: inherit; } :where(.sbl-root) :is(.sbl-single, .sbl-single) .article-hero .article-hero-featured img { display: block; width: 100%; height: 100%; border-radius: inherit; transform: none; } /* WordPress adapters: approved classes, real content and native controls. */ @font-face{font-family:'SBL Inter';src:url('../fonts/InterVariable.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap} .sbl-root{font-family:'SBL Inter',Inter,Arial,sans-serif!important;font-size:16px;line-height:1.6;background:var(--st-bg);color:var(--st-ink);width:100%;min-width:0;--sbl-cols:3;--sbl-tablet-cols:2;--sbl-mobile-cols:1} .sbl-root :is(h1,h2,h3,h4,button,input,select){font-family:inherit!important}.sbl-root *{box-sizing:border-box}.sbl-root [hidden]{display:none!important}.sbl-root .wrap{width:min(1550px,calc(100% - 96px))}.sbl-root .article-grid{grid-template-columns:repeat(var(--sbl-cols),minmax(0,1fr))}.sbl-root .postcard{display:flex;flex-direction:column;min-width:0}.sbl-root .post-info{display:flex;flex-direction:column;flex:1;padding:27px}.sbl-root .post-info h2{font-size:24px;font-weight:600;line-height:1.4;letter-spacing:-.6px;margin:15px 0;color:var(--st-ink)}.sbl-root .post-info h2 a{color:inherit}.sbl-root .post-info p{font-size:16px;line-height:1.7;margin:0 0 26px}.sbl-root .post-foot{margin-top:auto;display:flex;justify-content:space-between;gap:12px;font-size:14px}.sbl-root .post-foot a{color:var(--st-accent);font-weight:550}.sbl-root .sbl-card-thumb{display:block;aspect-ratio:1.85;height:auto!important;overflow:hidden}.sbl-root .sbl-card-thumb img,.sbl-root .sbl-feature-image img{width:100%;height:100%;object-fit:cover;display:block}.sbl-root .sbl-image-placeholder{display:grid;width:100%;height:100%;min-height:180px;place-items:center;background:var(--st-soft-accent);color:#7157a4}.sbl-root .sbl-image-placeholder svg{width:60%;max-height:180px}.sbl-root .sbl-feature-image{display:block;overflow:hidden}.sbl-root .feature-copy h2{font-size:32px;line-height:1.25;margin:20px 0 14px;font-weight:600;letter-spacing:-.8px;color:var(--st-ink)}.sbl-root .feature-copy h2 a{color:inherit}.sbl-root .blog-hero-content .lead{color:#f0eef3}.sbl-root .blog-hero-content .btn{align-self:flex-start}.sbl-root .filters .tabrow{display:flex;flex-wrap:wrap;gap:10px;flex:1;min-width:0}.sbl-root .filter{display:inline-flex;align-items:center;justify-content:center;min-height:48px}.sbl-root .search{display:flex;align-items:center;min-width:220px;border:1px solid var(--st-border);border-radius:99px;padding:4px 8px 4px 18px;background:var(--st-paper);gap:4px;max-width:350px}.sbl-root .search input{padding:6px 0;border:0;background:none;width:100%;min-width:0;outline-offset:3px;color:var(--st-ink)}.sbl-root .search button{border:0;background:none;color:var(--st-muted);width:38px;min-height:38px;flex-shrink:0;font-size:24px}.sbl-root .sbl-empty{grid-column:1/-1;text-align:center;padding:45px 20px}.sbl-root .sbl-pagination{margin:40px 0 10px}.sbl-root .sbl-pagination ul{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}.sbl-root .sbl-pagination a,.sbl-root .sbl-pagination span{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;border:1px solid var(--st-border);padding:8px 15px;border-radius:99px;color:var(--st-ink);background:var(--st-paper)}.sbl-root .sbl-pagination .current{background:#5209e5;color:#fff;border-color:#5209e5}.sbl-root .archive-content{padding-top:42px;padding-bottom:75px}.sbl-root .archive-controls{display:flex;justify-content:space-between;flex-wrap:wrap;gap:25px;margin-bottom:38px}.sbl-root .archive-controls form{max-width:100%;display:flex;flex-wrap:wrap;gap:10px;align-items:center}.sbl-root .archive-controls label{display:block;width:100%;font-size:13px;color:var(--st-muted)}.sbl-root .archive-controls input,.sbl-root .archive-controls select{border:1px solid var(--st-border);border-radius:99px;background:var(--st-paper);color:var(--st-ink);padding:12px 18px;min-height:46px;max-width:100%;min-width:0}.sbl-root .archive-search-line{display:flex;gap:10px;max-width:100%}.sbl-root .archive-search-line input{width:100%}.sbl-root .archive-intro{padding:48px 0;background:var(--st-bg-soft);border-bottom:1px solid var(--st-border)}.sbl-root .archive-intro h1{font-size:46px;line-height:1.2;margin:15px 0}.sbl-root .archive-kicker{color:var(--st-accent);font-size:11px;font-weight:600;letter-spacing:1.4px;margin-top:30px}.sbl-root .archive-lead{max-width:760px;color:var(--st-muted)} .sbl-root.sbl-single .articletext img{height:auto;max-width:100%}.sbl-root.sbl-single .articletext :is(pre,table){max-width:100%;overflow:auto}.sbl-root.sbl-single .articletext pre{white-space:pre;tab-size:4}.sbl-root.sbl-single .articletext{overflow-wrap:anywhere;min-width:0}.sbl-root.sbl-single .articletext .alignwide,.sbl-root.sbl-single .articletext .alignfull{margin-inline:0;width:100%;max-width:100%}.sbl-root.sbl-single .articletext iframe{max-width:100%}.sbl-root.sbl-single .articletext :is(h2,h3){scroll-margin-top:110px}.sbl-root.sbl-single .authorline img.avatar{border-radius:50%;width:42px;height:42px}.sbl-root.sbl-single .article-main{min-width:0}.sbl-root.sbl-single .side-rail{align-self:start;position:sticky;top:100px}.sbl-root.sbl-single .toclist{max-height:calc(100vh - 160px);overflow:auto}.sbl-root .toclist a{line-height:1.6;display:block;padding:11px 15px}.sbl-root .toclist a.sbl-toc-sub{font-size:11px;padding-left:24px}.sbl-root .sidebar-note{padding:0;overflow:hidden}.sbl-root .sidebar-note .post-info{padding:20px}.sbl-root .sidebar-note .post-info h2{font-size:20px}.sbl-root .sidebar-note .post-foot{flex-wrap:wrap}.sbl-root .sidebar-note .postcard{border:0;box-shadow:none}.sbl-root .sbl-listen{grid-template-columns:48px minmax(0,1fr) auto!important}.sbl-root .sbl-listen .listen-main{transform:none}.sbl-root .sbl-listen progress{width:100%;height:5px;accent-color:#5209e5;border:0}.sbl-root .sbl-audio-status{font-size:11px;color:var(--st-muted)}.sbl-root .sbl-listen .label{font-size:11px;letter-spacing:1px;font-weight:600;color:var(--st-audio-text)}.sbl-root .sbl-listen .player-side{display:flex;flex-direction:row;gap:8px;align-items:center}.sbl-root .sbl-listen select,.sbl-root .sbl-listen .toolbtn{border:1px solid var(--st-border);border-radius:10px;background:var(--st-paper);color:var(--st-ink);padding:10px;min-height:44px}.sbl-root .sbl-share{margin:32px 0;padding:25px;border-radius:20px;background:var(--st-paper);border:1px solid var(--st-border)}.sbl-root .sbl-share h2{font-size:23px;line-height:1.3;margin:8px 0 18px;font-weight:600}.sbl-root .sbl-social-buttons{display:flex;flex-wrap:wrap;gap:9px}.sbl-root .sbl-social{width:42px;height:42px;min-width:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--st-border);background:var(--st-bg-soft);color:var(--st-ink);padding:10px;transition:background .15s,color .15s}.sbl-root .sbl-social:hover{background:#5209e5;color:#fff;border-color:#5209e5}.sbl-root .sbl-social svg{width:20px;height:20px;fill:none}.sbl-root .sbl-share-floating{position:fixed;z-index:40;left:8px;top:45%;max-width:54px;padding:5px;border-radius:99px;margin:0}.sbl-root .sbl-share-floating .sbl-social-buttons{display:flex;flex-direction:column;gap:7px}.sbl-root .sbl-share-floating{display:none}.sbl-root .v8-author-portrait{overflow:hidden;display:flex;align-items:center;justify-content:center}.sbl-root .v8-author-portrait img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.sbl-root .v8-author-socials{margin-top:17px}.sbl-root .v8-author-name a{color:inherit}.sbl-root .v8-author-bio{margin:14px 0 0}.sbl-root .article-cta .eyebrow{color:#fff!important}.sbl-root .sbl-copy-fallback{width:100%;margin-top:12px;padding:10px;border:1px solid var(--st-border);border-radius:8px;color:var(--st-ink);background:var(--st-bg)}.sbl-root .sbl-no-toc{grid-template-columns:minmax(0,1fr) 220px;max-width:1150px}.sbl-root .sbl-no-toc>.left-rail{display:none}.sbl-root .sbl-no-next{grid-template-columns:220px minmax(0,1fr);max-width:1150px}.sbl-root .sbl-no-next>.right-rail{display:none}.sbl-root .sbl-no-next.sbl-no-toc{display:block;max-width:900px} @media(max-width:1100px){.sbl-root .wrap{width:calc(100% - 48px)}.sbl-root .article-grid{grid-template-columns:repeat(var(--sbl-tablet-cols),minmax(0,1fr))}.sbl-root .sbl-share-floating{display:none}.sbl-root .sbl-share-inline.sbl-placement-floating{display:block}.sbl-root.sbl-single .article-layout{display:block}.sbl-root.sbl-single .left-rail,.sbl-root.sbl-single .right-rail{display:none}.sbl-root .sbl-listen{grid-template-columns:48px minmax(0,1fr)!important}.sbl-root .sbl-listen .player-side{grid-column:2;justify-content:flex-start}.sbl-root .post-info{padding:22px}.sbl-root .post-info h2{font-size:22px}} @media(max-width:600px){.sbl-root .wrap{width:calc(100% - 32px)}.sbl-root .article-grid{grid-template-columns:repeat(var(--sbl-mobile-cols),minmax(0,1fr))}.sbl-root .filters{align-items:stretch}.sbl-root .search{max-width:none;min-width:0;width:100%}.sbl-root .filter{font-size:12px;padding:9px 13px;min-height:44px}.sbl-root .archive-intro h1{font-size:33px}.sbl-root .archive-search-line{flex-wrap:wrap}.sbl-root .sbl-share{padding:20px}.sbl-root .sbl-social{width:40px;height:40px;min-width:40px}.sbl-root .v8-author-main{display:flex;flex-wrap:wrap}.sbl-root .v8-author-info{display:block;min-width:0}.sbl-root .v8-author-portrait{width:76px;height:76px;flex:none}.sbl-root .feature-copy h2{font-size:26px}.sbl-root .post-foot{flex-wrap:wrap}.sbl-root .article-hero-grid:not(:has(.article-hero-featured)){display:block}} /* Floating controls occupy the article body only, with room beside the TOC. */ @media(min-width:1101px){.sbl-root.sbl-share-ready.sbl-share-active .sbl-share-floating{display:block}.sbl-root.sbl-share-ready .sbl-share-inline.sbl-placement-floating{display:none}.sbl-root.sbl-share-ready .article-body-wrap>.wrap{width:min(1450px,calc(100% - 150px))}} .sbl-root.sbl-single .article-head h1,.sbl-root .blog-hero-content h1{font-family:'SBL Inter',Inter,Arial,sans-serif!important} .sbl-root .sbl-listen progress{appearance:none;-webkit-appearance:none;border-radius:99px;background:var(--st-track)}.sbl-root .sbl-listen progress::-webkit-progress-bar{background:var(--st-track);border-radius:99px}.sbl-root .sbl-listen progress::-webkit-progress-value{background:#5209e5;border-radius:99px}.sbl-root .sbl-listen progress::-moz-progress-bar{background:#5209e5;border-radius:99px} .sbl-root .sbl-feature-image{padding:0!important;min-height:0!important;aspect-ratio:4/3}.sbl-root .blog-hero-eyebrow{color:#e4d8ff!important}.sbl-root .comment-respond{margin-top:35px;padding:24px;border:1px solid var(--st-border);border-radius:20px;background:var(--st-paper);min-width:0}.sbl-root .comment-respond h3{font-size:24px;margin:0 0 15px}.sbl-root .comment-respond label{display:block;margin-bottom:7px;font-size:14px}.sbl-root .comment-respond :is(textarea,input:not([type=checkbox]):not([type=submit])){display:block;width:100%;max-width:100%;min-width:0;border:1px solid var(--st-border);border-radius:10px;background:var(--st-bg);color:var(--st-ink);padding:12px;font:inherit}.sbl-root .comment-respond textarea{min-height:160px}.sbl-root .comment-respond .comment-form-cookies-consent{display:flex;align-items:flex-start;gap:9px}.sbl-root .comment-respond input[type=checkbox]{width:18px;height:18px;flex-shrink:0;margin-top:3px;accent-color:#5209e5}.sbl-root .comment-respond input[type=submit]{max-width:100%;min-height:44px;border:0;border-radius:99px;background:#5209e5;color:#fff;padding:12px 23px;font:inherit;cursor:pointer} .sbl-root .article-hero-grid.sbl-no-image{display:block;max-width:1000px} .sbl-root .post-info :is(h2,.meta),.sbl-root .archive-intro h1{overflow-wrap:anywhere} /* RC2: fill the existing container and give the recommendation a real sidebar. */ @media(min-width:1280px){ .sbl-root.sbl-single .article-body-wrap>.article-layout{display:grid;grid-template-columns:185px minmax(0,1fr) 320px;gap:32px;max-width:none} .sbl-root.sbl-single .article-layout>.right-rail{display:block;min-width:0;width:100%} .sbl-root.sbl-single .article-layout.sbl-no-toc{grid-template-columns:minmax(0,1fr) 320px;max-width:1250px} .sbl-root.sbl-single .article-layout.sbl-no-next{grid-template-columns:185px minmax(0,1fr);max-width:1250px} .sbl-root.sbl-single .article-layout.sbl-no-toc.sbl-no-next{display:block;max-width:900px} } @media(min-width:1101px) and (max-width:1279px){ .sbl-root.sbl-single .article-body-wrap>.article-layout{display:grid;grid-template-columns:170px minmax(0,1fr);gap:28px} .sbl-root.sbl-single .article-layout>.right-rail{display:none} .sbl-root.sbl-single .article-layout.sbl-no-toc{display:block;max-width:900px} } .sbl-root.sbl-single .toclist a{font-size:14px;line-height:1.5;padding:11px 14px} .sbl-root.sbl-single .sbl-next-card{width:100%;min-width:0;margin-top:18px;border:1px solid var(--st-border);border-radius:18px;overflow:hidden;background:var(--st-paper);box-shadow:var(--st-shadow)} .sbl-root.sbl-single .sbl-next-image{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--st-soft-accent);padding:0;margin:0} .sbl-root.sbl-single .sbl-next-image :is(img,picture){display:block;width:100%;height:100%;object-fit:cover;margin:0;max-width:none} .sbl-root.sbl-single .sbl-next-image .sbl-image-placeholder{min-height:0} .sbl-root.sbl-single .sbl-next-body{padding:20px} .sbl-root.sbl-single .sbl-next-meta{display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--st-muted);font-size:12px;line-height:1.6} .sbl-root.sbl-single .sbl-next-meta time{white-space:nowrap} .sbl-root.sbl-single .sbl-next-title{margin:12px 0;font-size:20px;line-height:1.4;font-weight:600;letter-spacing:-.45px;overflow-wrap:anywhere} .sbl-root.sbl-single .sbl-next-title a{color:var(--st-ink)!important;text-decoration:none!important;text-transform:none} .sbl-root.sbl-single .sbl-next-title a:hover{text-decoration:underline!important;text-underline-offset:4px} .sbl-root.sbl-single .sbl-next-excerpt{margin:0 0 18px;color:var(--st-muted);font-size:14px;line-height:1.65} .sbl-root.sbl-single .sbl-next-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;font-size:12px;line-height:1.5;color:var(--st-muted)} .sbl-root.sbl-single .sbl-next-footer a{color:var(--st-accent);font-weight:600;text-decoration:none} /* Keep theme-wide button padding and SVG margins out of the narration control. */ .sbl-root.sbl-single .sbl-listen .player-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0!important;margin:0!important;line-height:1!important;box-sizing:border-box;flex-shrink:0;align-self:center} .sbl-root.sbl-single .sbl-listen .player-btn svg{display:block!important;flex:none;width:22px!important;height:22px!important;margin:0!important;padding:0!important;transform:none!important} @media(max-width:1100px){.sbl-root.sbl-single .sbl-listen .player-btn{grid-row:1 / span 2;grid-column:1}.sbl-root.sbl-single .sbl-listen .listen-main{grid-column:2;grid-row:1}.sbl-root.sbl-single .sbl-listen .player-side{grid-column:2;grid-row:2}} /* RC3: viewport-wide post canvas, with a centered 1400px reading layout. */ .sbl-root.sbl-single{width:var(--sbl-viewport-width,100vw);max-width:none!important;margin-left:var(--sbl-viewport-offset,calc(50% - 50vw));margin-right:0} .sbl-root.sbl-single .article-hero{width:100%;max-width:none;margin:0} .sbl-root.sbl-single .article-hero>.wrap{width:min(1400px,calc(100% - 64px));margin-inline:auto} .sbl-root.sbl-single .article-head .crumb{margin:0 0 22px;padding:0;line-height:1.5;display:flex;flex-wrap:wrap;gap:12px} .sbl-root.sbl-single .article-head .category{margin-top:0} .sbl-root.sbl-single .article-body-wrap>.article-layout, .sbl-root.sbl-single.sbl-share-ready .article-body-wrap>.article-layout, .sbl-root.sbl-single .related-section>.wrap{width:min(1400px,calc(100% - 64px));margin-inline:auto} @media(min-width:1101px){ .sbl-root.sbl-single.sbl-share-ready .article-body-wrap>.article-layout{width:min(1400px,calc(100% - 160px))} .sbl-root.sbl-single .sbl-share-floating{left:max(16px,calc((100vw - 1400px)/2 - 66px));top:50%;transform:translateY(-50%);max-width:54px;padding:8px;border-radius:18px;background:var(--st-paper);box-shadow:var(--st-shadow)} .sbl-root.sbl-single .sbl-share-floating .sbl-social{width:36px;height:36px;min-width:36px;border-radius:12px} .sbl-root.sbl-single .sbl-share-floating svg{width:16px;height:16px} } @media(max-height:600px){.sbl-root.sbl-single.sbl-share-ready.sbl-share-active .sbl-share-floating{display:none}.sbl-root.sbl-single.sbl-share-ready .sbl-share-inline.sbl-placement-floating{display:block}} @media(max-width:600px){.sbl-root.sbl-single .article-hero>.wrap,.sbl-root.sbl-single .article-body-wrap>.article-layout,.sbl-root.sbl-single .related-section>.wrap{width:calc(100% - 32px)}} /* Exact prototype sharing: two dividers, outlined square buttons, muted icons. */ .sbl-root.sbl-single .sbl-share-inline{margin:38px 0;padding:23px 0 25px;border:0;border-block:1px solid var(--st-border);border-radius:0;background:transparent;box-shadow:none} .sbl-root.sbl-single .sbl-share-inline .eyebrow{font-size:9px;letter-spacing:1.7px;font-weight:650;color:var(--st-accent)!important} .sbl-root.sbl-single .sbl-share-inline h2{font:550 18px/1.4 'SBL Inter',Inter,Arial,sans-serif!important;letter-spacing:-.4px;margin:6px 0 17px!important;color:var(--st-ink)!important} .sbl-root.sbl-single .sbl-social{width:44px;height:44px;min-width:44px;flex:0 0 auto;border-radius:12px;padding:0!important;margin:0;line-height:1;border:1px solid var(--st-border)!important;background:var(--st-paper)!important;color:var(--st-muted)!important;text-decoration:none!important} .sbl-root.sbl-single .sbl-social svg{width:18px;height:18px;display:block;margin:0!important;stroke:currentColor;transform:none} .sbl-root.sbl-single .sbl-social:hover{color:var(--st-accent)!important;border-color:var(--st-accent)!important;background:var(--st-soft-accent)!important} .sbl-root.sbl-single .v8-author-footer{background:var(--st-paper);border-color:var(--st-border)} .sbl-root.sbl-single .v8-author-footer a{display:inline-flex;align-items:center;min-height:30px;text-decoration:none!important} .sbl-root.sbl-single .v8-author-link{color:var(--st-ink)!important;gap:12px;font-size:12px;font-weight:600} .sbl-root.sbl-single .v8-author-contact{color:var(--st-muted)!important;gap:8px;font-size:12px} .sbl-root.sbl-single .v8-author-link svg{color:var(--st-accent)!important} .sbl-root.sbl-single .v8-author-footer svg{width:15px;height:15px;flex:none;margin:0} .sbl-root.sbl-single .v8-author-contact:hover{color:var(--st-accent)!important} /* Explicit semantic colors beat Controls Core's global link/icon declarations. */ .sbl-root :is(h1,h2,h3,h4,h5,h6),.sbl-root .articletext,.sbl-root .articletext :is(p,li,td,th,blockquote,strong,em){color:var(--st-ink)!important} .sbl-root a{color:var(--st-accent)!important} .sbl-root :is(.crumb,.authorline,.meta,.rail-title,.v8-author-label,.v8-author-bio,.sbl-next-meta,.sbl-next-excerpt,.sbl-next-footer,.post-info p){color:var(--st-muted)!important} .sbl-root :is(.crumb,.authorline,.toclist) a{color:var(--st-muted)!important} .sbl-root .toclist a.on{color:var(--st-accent)!important;background:var(--st-soft-accent)!important;border-color:var(--st-accent)!important} .sbl-root :is(.post-info h2,.feature-copy h2,.sbl-next-title,.v8-author-name) a{color:var(--st-ink)!important} .sbl-root :is(.postcard,.sbl-next-card,.v8-author,.comment-respond){background:var(--st-paper)!important;border-color:var(--st-border)!important} .sbl-root .article-body-wrap{background:var(--st-bg)!important} .sbl-root .article-cta{background:var(--st-dark-panel)!important;color:var(--st-ink)} .sbl-root .article-cta :is(p,h2){color:#f4f5f8!important} .sbl-root .article-cta a,.sbl-root .btn{color:#fff!important;background:#5209e5} .sbl-root .filter{color:var(--st-ink)!important;background:var(--st-paper)!important;border-color:var(--st-border)!important} .sbl-root .filter.active,.sbl-root .filter[aria-current=page]{color:#fff!important;background:#5209e5!important;border-color:#5209e5!important} .sbl-root .sbl-listen{background:var(--st-audio)!important;border-color:var(--st-audio-border)!important} .sbl-root .sbl-listen .player-btn{color:#fff!important;background:#5209e5!important} .sbl-root .sbl-listen .player-btn svg{fill:currentColor;stroke:none} .sbl-root .articletext :is(pre,code){background:var(--st-bg-soft)!important;color:var(--st-ink)!important;border-color:var(--st-border)!important} .sbl-root .articletext :is(td,th){border-color:var(--st-border)!important} /* Only the live post template adapts the existing quote widget; dialog untouched. */ body.sbl-post-template #slf-root>.slf-float{top:auto!important;bottom:22px!important;right:22px!important;transform:none!important} @media(max-width:600px){.sbl-root.sbl-single .sbl-social{width:40px;height:40px;min-width:40px}.sbl-root.sbl-single .sbl-share-inline{margin-top:30px}.sbl-root.sbl-single .sbl-share-inline h2{font-size:17px!important}body.sbl-post-template #slf-root>.slf-float{bottom:18px!important;right:16px!important;max-width:calc(100vw - 110px)}} @media(max-width:600px){ .sbl-root.sbl-single.sbl-share-ready .article-body-wrap>.article-layout{width:calc(100% - 32px)} body.sbl-post-template #slf-root>.slf-float{max-width:calc(100vw - 144px)!important;min-width:0!important;padding:12px!important;font-size:12px!important} } .sbl-root .blog-hero-content h1,.sbl-root .blog-primary-link{color:#fff!important} .sbl-root .filter.active,.sbl-root .filter[aria-current=page]{color:var(--st-accent-ink)!important;background:var(--st-accent)!important;border-color:var(--st-accent)!important}