:root{--bone:#FAFAF7;--ink:#0B1116;--cobalt:#1F3BFF;--cobalt-dk:#1733E0;--cobalt-wash:#EEF1FF;--white:#FFFFFF;--gray:#5F666B;--gray-lt:#8A9196;--line:#E7E7E2;--serif:'Instrument Serif',Georgia,serif;--mono:'IBM Plex Mono',ui-monospace,monospace;--sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--ease:cubic-bezier(.2,.8,.2,1)}
*{margin:0;padding:0;box-sizing:border-box}
::selection{background:var(--cobalt);color:#fff}
html,body{height:100%}
body{font-family:var(--sans);background:var(--bone);color:var(--ink);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}
a{color:inherit;text-decoration:none}
.wrap{width:100%;margin:0 auto;padding-left:max(24px,5vw);padding-right:max(24px,5vw)}
header.site{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:28px;padding-bottom:28px}
.logo{font:400 38px/1 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.logo .dot{color:var(--cobalt)}
header nav{display:flex;align-items:center;gap:28px}
.navlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gray);background:none;border:0;cursor:pointer;transition:color .2s}
.navlink:hover,.navlink:focus-visible,.navlink[aria-current="page"]{color:var(--cobalt)}
.navlink i{display:inline-block;width:6px;height:6px;background:currentColor}
main{flex:1}
footer{border-top:1px solid var(--line);padding-top:22px;padding-bottom:26px;font:400 13px/1.6 var(--sans);color:var(--gray);margin-top:80px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 24px}
footer a{color:var(--gray)}footer a:hover{color:var(--ink)}
@media(min-width:901px){header.site{padding-top:36px;padding-bottom:36px}}
@media(max-width:640px){header.site{padding-top:20px;padding-bottom:20px}.logo{font-size:30px}header nav{gap:18px}footer .wrap{flex-direction:column}}

/* ---------- blog index ---------- */
.blog-hero{padding:48px 0 44px;max-width:900px}
.blog-eyebrow,.blog-section-kicker{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt);margin-bottom:18px}
.blog-hero h1{font:400 clamp(44px,5vw,76px)/1 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.blog-hero h1 em{font-style:normal;color:var(--cobalt)}
.blog-hero-copy{margin-top:22px;max-width:56ch;font-size:clamp(17px,1.3vw,20px);line-height:1.55;color:#3A4046}
.blog-status{border:1px solid var(--line);border-radius:8px;padding:22px 24px;background:#fff;color:var(--gray);margin:24px 0}
.blog-status.hidden,.hidden{display:none}
.blog-status-eyebrow{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt);margin-bottom:8px}
.blog-featured-card{display:block;border-top:1px solid var(--ink);padding:36px 0 44px}
.blog-featured-link{display:block}
.blog-featured-title{font:400 clamp(32px,3.4vw,52px)/1.05 var(--serif);letter-spacing:-.015em;margin:14px 0 16px;max-width:22ch;text-wrap:balance;transition:color .2s}
.blog-featured-card:hover .blog-featured-title{color:var(--cobalt)}
.blog-featured-excerpt{color:#3A4046;font-size:17px;max-width:64ch;margin-bottom:18px}
.blog-chip-row{display:flex;flex-wrap:wrap;gap:8px}
.blog-chip{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt);background:#EEF1FF;padding:6px 9px;border-radius:3px}
.blog-post-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font:500 12px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gray-lt)}
.blog-section-heading{border-top:1px solid var(--ink);padding-top:28px;margin-top:8px;margin-bottom:8px}
.blog-section-title{font:400 clamp(28px,2.6vw,38px)/1.1 var(--serif)}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
.blog-card{border-top:1px solid var(--line);padding:28px 0 32px}
.blog-card-link{display:block;height:100%}
.blog-card-title{font:400 clamp(24px,2vw,30px)/1.12 var(--serif);letter-spacing:-.01em;margin:12px 0 10px;text-wrap:balance;transition:color .2s}
.blog-card:hover .blog-card-title{color:var(--cobalt)}
.blog-card-excerpt{color:var(--gray);font-size:15px;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:980px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.blog-grid{grid-template-columns:1fr}.blog-hero{padding:20px 0 28px}}

/* ---------- article ---------- */
.blog-article-wrap{max-width:860px;margin:0 auto;padding-top:28px}
.blog-back-link{display:inline-flex;align-items:center;gap:8px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin-bottom:40px}
.blog-back-link:hover{color:var(--cobalt)}
.blog-post-header{margin-bottom:40px;padding-bottom:32px;border-bottom:1px solid var(--line)}
.blog-post-title{font:400 clamp(38px,4.4vw,64px)/1.02 var(--serif);letter-spacing:-.02em;margin:16px 0 18px;text-wrap:balance}
.blog-post-excerpt{color:#3A4046;font-size:clamp(17px,1.3vw,20px);line-height:1.55;margin-bottom:18px}
.blog-post-hero-wrap{margin:0 0 36px}
.blog-post-hero{width:100%;height:auto;border-radius:8px;display:block}

.blog-body code {
  padding: 0.15em 0.35em;
  background: var(--cobalt-wash);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.88em;
}
.blog-body h2,
.blog-body h3,
.blog-body h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.blog-body {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1F262C;
  font-size: 19px;
  line-height: 1.75;
}
.blog-body > *:first-child {
  margin-top: 0;
}
.blog-body > *:last-child {
  margin-bottom: 0;
}
.blog-body p,
.blog-body ul,
.blog-body ol,
.blog-body blockquote,
.blog-body figure {
  margin: 1.35em 0;
}
.blog-body h2,
.blog-body h3,
.blog-body h4 {
  margin: 2em 0 0.65em;
  color: var(--ink);
  line-height: 1.08;
}
.blog-body h2 {
  padding-top: 0.7em;
  border-top: 1px solid var(--line);
  font-size: clamp(34px, 4vw, 46px);
}
.blog-body h3 {
  font-size: clamp(27px, 3vw, 35px);
}
.blog-body h4 {
  font-size: 24px;
}
.blog-body a {
  color: var(--cobalt);
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.blog-body strong {
  color: var(--ink);
}
.blog-body ul,
.blog-body ol {
  padding-left: 1.4em;
}
.blog-body li + li {
  margin-top: 0.55em;
}
.blog-body blockquote {
  padding: 22px 26px;
  border-left: 4px solid var(--cobalt);
  background: var(--cobalt-wash);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.35em;
  line-height: 1.45;
}
.blog-body figure {
  margin-right: 0;
  margin-left: 0;
}
.blog-body img {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.blog-body figcaption {
  margin-top: 10px;
  color: var(--gray);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
}
.blog-body {
    padding: 0;
  }
.blog-status {
    padding: 22px 20px;
  }
.blog-body {
    font-size: 17px;
  }
.blog-body blockquote {
    padding: 18px 20px;
  }