/* Clickstudio blog: same tokens, font and nav as /site/index.html */
:root{--fog:#E7EAEE;--fog2:#DCE1E7;--ink:#141B2D;--ink2:#3A4357;--tei:#C6D45A;--tei-ink:#4D5A12;--paper:#F6F7F9;--line:#CBD2DC;
  --lg-tint:rgba(255,255,255,.34);--lg-tint-frost:rgba(246,247,249,.74);--lg-shadow:0 30px 70px -36px rgba(20,27,45,.45);
  --f:"Bricolage Grotesque",system-ui,sans-serif;--pad:clamp(20px,5vw,80px)}
*{box-sizing:border-box;margin:0}
html{background:var(--fog);color:var(--ink);-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
body{font:400 18px/1.6 var(--f);font-variation-settings:"opsz" 14;overflow-x:hidden;overflow-x:clip;min-height:100vh;
  background:
    radial-gradient(42vw 42vw at 88% 6%,rgba(198,212,90,.55),transparent 62%),
    radial-gradient(38vw 38vw at 4% 38%,rgba(150,170,205,.45),transparent 64%),
    radial-gradient(30vw 30vw at 70% 78%,rgba(198,212,90,.28),transparent 66%),
    var(--fog);background-attachment:fixed}
a{color:inherit}:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
img{display:block;max-width:100%}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* nav (identical to main site) */
.nav{position:fixed;z-index:30;top:14px;left:50%;translate:-50% 0;width:min(1240px,calc(100% - 24px));display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 18px;border-radius:18px;--lg-refract:36}
.mark{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:-.02em;text-decoration:none}
.mark svg{width:26px;height:26px}
.nav nav{display:flex;gap:2px}
.nav nav a{text-decoration:none;font-size:15.5px;padding:10px 14px;border-radius:12px;color:var(--ink2)}
.nav nav a:hover{background:rgba(20,27,45,.06);color:var(--ink)}
.nav nav a[aria-current]{color:var(--ink);background:rgba(255,255,255,.6)}
.nav .cta{background:var(--ink);color:#fff!important;white-space:nowrap}.nav .cta:hover{background:#000}
@media(max-width:860px){.nav nav a:not(.cta):not(.keep){display:none}}
@media(max-width:480px){.nav{padding-left:14px}.mark{font-size:17px;gap:8px}.mark svg{width:22px;height:22px}.nav .cta,.nav nav a.keep{padding:10px 11px;font-size:15px}}
@media(max-width:374px){.mark svg{display:none}}
/* layout */
main{padding:128px var(--pad) 40px}
.wrap{max-width:1180px;margin:0 auto}
h1{font-weight:560;font-variation-settings:"opsz" 96,"wdth" 80;font-size:clamp(42px,6.4vw,96px);line-height:.95;letter-spacing:-.04em;max-width:16ch}
.lede{max-width:52ch;margin-top:20px;font-size:clamp(18px,1.5vw,21px);color:var(--ink2)}
.crumbs{font-size:14.5px;color:var(--ink2);margin-bottom:22px}
.crumbs a{text-decoration:none;border-bottom:1px solid var(--line)}
.crumbs a:hover{border-color:var(--ink)}
/* index cards */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:56px;padding:0;list-style:none}
.card{border-radius:26px;padding:28px 28px 26px;display:flex;flex-direction:column;gap:12px;min-width:0;--lg-refract:60}
.card .when{font-size:14px;color:var(--ink2)}
.card h2{font-weight:620;font-variation-settings:"opsz" 72,"wdth" 85;font-size:clamp(26px,2.4vw,34px);line-height:1.05;letter-spacing:-.025em}
.card h2 a{text-decoration:none}
.card h2 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card p{color:var(--ink2);font-size:16.5px}
.card .more{margin-top:auto;font-weight:600;font-size:15.5px;align-self:flex-start;border-bottom:1.5px solid var(--tei-ink);padding-bottom:2px}
.card:hover{--lg-tint:rgba(255,255,255,.5)}
@media(max-width:760px){.cards{grid-template-columns:minmax(0,1fr)}}
/* article */
.post{max-width:760px;margin:0 auto}
.post h1{font-size:clamp(38px,5.4vw,72px);max-width:none}
.meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:20px;font-size:15px;color:var(--ink2)}
.body{margin-top:40px;border-radius:28px;padding:clamp(22px,4vw,48px);background:rgba(255,255,255,.82);box-shadow:0 1px 0 var(--line),0 40px 80px -60px rgba(20,27,45,.5)}
.body h2{font-weight:620;font-variation-settings:"opsz" 72,"wdth" 85;font-size:clamp(26px,2.8vw,36px);line-height:1.08;letter-spacing:-.025em;margin:42px 0 12px}
.body h2:first-child{margin-top:0}
.body p,.body li{color:#232B3D}
.body p+p{margin-top:14px}
.body ul,.body ol{margin:12px 0 0;padding-left:22px;display:grid;gap:8px}
.body a{text-decoration-color:var(--tei-ink);text-underline-offset:3px;text-decoration-thickness:1.5px}
.body .src-ref{font-size:.82em;color:var(--ink2);white-space:nowrap}
.body .note{margin-top:18px;padding:16px 18px;border-radius:16px;background:var(--fog);font-size:16.5px}
.sources{margin-top:46px;padding-top:26px;border-top:1.5px solid var(--ink)}
.sources h2{margin-top:0}
.sources ol{font-size:15.5px;overflow-wrap:anywhere}
.sources li span{color:var(--ink2)}
.cta-box{margin-top:28px;border-radius:28px;padding:clamp(22px,3.5vw,36px);--lg-refract:70}
.cta-box h2{font-weight:620;font-variation-settings:"opsz" 72,"wdth" 85;font-size:clamp(26px,2.8vw,36px);line-height:1.08;letter-spacing:-.025em}
.cta-box p{color:var(--ink2);margin:10px 0 20px;max-width:52ch}
.acts{display:flex;gap:10px;flex-wrap:wrap}
.btn{appearance:none;border:0;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:10px;font:600 16.5px/1 var(--f);padding:17px 22px;border-radius:16px;transition:transform .2s,background .2s}
.btn:active{transform:scale(.97)}
.btn.ink{background:var(--ink);color:#fff}.btn.ink:hover{background:#000}
.btn.tei{background:var(--tei);color:var(--ink)}.btn.tei:hover{background:#D3E06C}
.btn.line{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.next{margin-top:34px}
.next h2{font-size:22px;font-weight:650;letter-spacing:-.015em;margin-bottom:12px}
.next ul{list-style:none;padding:0;display:grid;gap:8px}
.next a{font-weight:560}
footer{padding:28px var(--pad) 40px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:14px;color:var(--ink2);border-top:1px solid var(--line);max-width:1280px;margin:40px auto 0}
footer a{color:inherit}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}
.body h3{font-weight:620;font-variation-settings:"opsz" 48,"wdth" 90;font-size:21px;line-height:1.2;letter-spacing:-.015em;margin:24px 0 6px}