.nav a[aria-current]{opacity:1;position:relative}
.nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--blue)}
.skip-link{position:fixed;z-index:1000;top:12px;left:12px;transform:translateY(-180%);padding:10px 14px;background:var(--navy);color:var(--on-dark);border:2px solid var(--lime);border-radius:4px;font:600 13px/1.4 "Montserrat",sans-serif}
.skip-link:focus{transform:translateY(0)}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}

.blog-page{background:var(--paper)}
.blog-main{min-height:calc(100vh - 80px)}
.blog-hero{padding:clamp(84px,10vw,148px) 0 clamp(72px,8vw,112px)}
.blog-hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:clamp(48px,8vw,140px);align-items:center}
.blog-hero-copy{max-width:980px}
.blog-h1{font-size:clamp(4.6rem,10vw,142px);font-weight:600;line-height:.95;letter-spacing:-.04em;text-wrap:balance}
.blog-intro{font-size:clamp(1.1rem,1.55vw,1.4rem);line-height:1.55;color:var(--ink);max-width:32ch;padding-bottom:.45em}

.blog-index{min-height:0}
.blog-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:clamp(34px,5vw,62px)}
.blog-section-head .h2{color:var(--on-dark)}

/* Draft cards become links to individual article routes when approved content is added. */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.blog-card[hidden]{display:none}
.blog-pagination{display:grid;grid-template-columns:auto minmax(0,auto) auto;justify-content:center;align-items:center;gap:16px;margin-top:32px}
.blog-page-numbers{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-width:0}
.blog-page-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border:1px solid var(--navy-line-2);border-radius:24px;color:var(--on-dark);font-size:14px}
.blog-page-link[href]:hover{border-color:var(--lime);color:var(--lime)}
.blog-page-link:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.blog-page-link[aria-disabled]{opacity:.35}
.blog-page-number{min-width:44px;padding:10px 12px;font-variant-numeric:tabular-nums}
.blog-page-number[aria-current="page"]{background:var(--lime);border-color:var(--lime);color:var(--navy);font-weight:600}
@media(max-width:600px){
  .blog-pagination{gap:8px}
  .blog-page-step{width:44px;padding:0;font-size:0}
  .blog-page-step::before{content:attr(data-arrow);font-size:18px}
}
#articles-title{scroll-margin-top:110px}
.blog-card{display:flex;min-width:0;overflow:hidden;border:1px solid var(--navy-line-2);border-radius:var(--r-card);background:rgba(255,255,255,.035);transition:border-color .2s var(--ease)}
.blog-card-preview,
.blog-card-link{display:flex;min-height:300px;flex-direction:column;gap:20px;padding:clamp(28px,3vw,38px);color:var(--on-dark)}
.blog-card-link{flex:1;min-width:0;cursor:pointer;transition:background .2s var(--ease)}
.blog-card-link:hover,.blog-card-link:focus-visible{background:rgba(255,255,255,.06)}
.blog-card:has(>.blog-card-link:hover),.blog-card:has(>.blog-card-link:focus-visible){border-color:var(--lime)}
.blog-card-link:focus-visible{outline:2px solid var(--lime);outline-offset:-2px;border-radius:var(--r-card)}
.blog-card h2,.blog-card h3{font-size:clamp(1.45rem,2.1vw,2rem);font-weight:500;line-height:1.18;color:var(--on-dark)}
.blog-card p{color:var(--on-dark-mut);font-size:16px;line-height:1.55;max-width:42ch}
.blog-card-open{display:flex;flex-shrink:0;width:44px;height:44px;margin-top:auto;align-self:flex-end;align-items:center;justify-content:center;border-radius:50%;background:var(--lime);color:var(--navy)}
.blog-card-open svg{width:16px;height:16px}
.blog-card-placeholder{opacity:.58}

/* Shared long-form article layout. */
.article-hero{background:var(--navy);color:var(--on-dark);padding:clamp(38px,5vw,64px) 0 clamp(60px,7vw,96px)}
.article-hero-inner{width:calc(100% - 2 * var(--pad));max-width:1040px;padding-left:0;padding-right:0}
.article-back{display:inline-flex;margin-bottom:clamp(34px,4vw,52px);font:500 14px/1.5 "Montserrat",sans-serif;color:var(--on-dark-mut)}
.article-back:hover{color:var(--lime)}
.article-back:focus-visible{outline:2px solid var(--lime);outline-offset:4px;border-radius:3px}
.article-title{font-size:clamp(2.4rem,4.5vw,60px);font-weight:600;line-height:1.2;letter-spacing:-.03em;color:var(--on-dark);text-wrap:balance}
.article-title-accent{background:var(--lime);color:var(--navy);padding:0 .1em;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.article-layout{width:calc(100% - 2 * var(--pad));max-width:760px;padding:clamp(50px,6vw,76px) 0 clamp(76px,9vw,124px)}
.article-aside{margin-bottom:clamp(52px,7vw,76px);font-size:14px;line-height:1.5;color:var(--ink-mut)}
.article-toc__title{margin-bottom:18px;font:600 15px/1.5 "Montserrat",sans-serif;color:var(--ink)}
.article-toc ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px;margin:0;padding:0;list-style:none}
.article-toc a{display:block;color:inherit}
.article-toc a:hover{color:var(--ink)}
.article-toc a:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:2px}
.article-content{max-width:760px;font-size:clamp(1rem,1.12vw,1.12rem);line-height:1.78;color:var(--ink)}
.article-content>*+*{margin-top:1.4em}
.article-content h2{font-size:clamp(1.7rem,3vw,2.35rem);font-weight:500;line-height:1.2;margin-top:2.6em;scroll-margin-top:110px}
.article-content h3{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:600;line-height:1.25;margin-top:1.8em}
.article-content ul,.article-content ol{padding-left:1.25em}
.article-content li+li{margin-top:.65em}
.article-content a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.article-content a:hover{color:var(--blue)}
.article-content figure{margin:2em 0 0}
.article-content figure img{display:block;width:100%;height:auto;border-radius:8px}
.article-content .caption{margin-top:12px;font-size:.82em;line-height:1.6;color:var(--ink-mut)}
.article-content .table-wrap{overflow-x:auto;border:1px solid rgba(22,46,62,.15);border-radius:8px}
.article-content .table-wrap:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.article-content table{width:100%;min-width:580px;border-collapse:collapse;font-size:.85em;line-height:1.55}
.article-content th{background:var(--navy);color:var(--on-dark);text-align:left;font-weight:600}
.article-content th,.article-content td{padding:18px;vertical-align:top;border-bottom:1px solid rgba(22,46,62,.15)}
.article-content tbody tr:nth-child(even){background:rgba(22,46,62,.035)}
.article-faq{margin-top:3.6em}
.article-faq h2{margin-top:0}
.article-faq h3{margin-top:2em;font-size:clamp(1.12rem,1.7vw,1.42rem)}

@media(max-width:1080px){
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:820px){
  .blog-hero-grid{grid-template-columns:minmax(0,1fr)}
  .blog-hero-grid{gap:32px}
  .blog-intro{max-width:46ch;padding-bottom:0}
}

@media(max-width:720px){
  .nav a[aria-current]::after{bottom:3px}
  .blog-h1{font-size:clamp(4rem,20vw,6.2rem)}
  .blog-section-head{align-items:flex-start;flex-direction:column}
  .blog-grid{grid-template-columns:minmax(0,1fr)}
  .blog-card-preview,.blog-card-link{min-height:0}
  .article-title{font-size:clamp(1.75rem,8.5vw,2.4rem)}
  .article-toc ul{grid-template-columns:minmax(0,1fr)}
  .article-layout{padding-top:44px}
}