h1,h2,h3,.display{font-family:'Saira Condensed','Saira',sans-serif;font-weight:600;line-height:1.04;letter-spacing:-.01em}
.knowledge-article{background:#fff;color:var(--ink-muted)}
.article-header{position:relative;overflow:hidden;background:var(--navy-deep);color:#fff;min-height:clamp(520px,46vw,620px);display:flex;flex-direction:column;justify-content:flex-end}
/* Cover photo fills the hero like every other page hero (SanityCoverImage:
   object-fit:cover + hotspot-aware object-position). */
.article-header::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(12,52,87,.5) 0%,rgba(12,52,87,.3) 40%,rgba(12,52,87,.92) 100%),linear-gradient(100deg,rgba(12,52,87,.72),rgba(12,52,87,.14) 62%)}
.article-header-inner{position:relative;z-index:2;width:100%;padding-top:clamp(40px,5vw,68px);padding-bottom:clamp(48px,6vw,80px)}
@media(min-width:901px){.article-header{min-height:clamp(620px,56.5vw,700px)}}
.article-crumb{display:flex;gap:.5em;margin-bottom:6px;color:var(--on-dark-muted);font-family:'Saira',sans-serif;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.article-crumb a{color:var(--on-dark-muted)}
.article-crumb a:hover{color:#fff}
.article-crumb span{color:var(--blue-soft)}
.article-header h1{max-width:18ch;margin:.32em 0 .3em;color:#fff;font-size:clamp(2.45rem,5.6vw,4.4rem);line-height:1.02}
.article-header time{display:block;color:var(--on-dark-muted);font-family:'Saira',sans-serif;font-size:.82rem;letter-spacing:.04em}
.article-summary{max-width:70ch;margin:24px 0 0;color:var(--on-dark-body);font-size:clamp(1.08rem,1.8vw,1.28rem);font-weight:500;line-height:1.58}
.article-figure figcaption{margin-top:9px;color:var(--gray);font-size:.8rem;line-height:1.4}
.article-layout{display:grid;grid-template-columns:minmax(0,760px) minmax(200px,280px);gap:clamp(50px,7vw,90px);justify-content:center;padding-top:clamp(50px,7vw,82px);padding-bottom:clamp(68px,9vw,108px)}
.article-body{min-width:0;font-size:1.03rem;line-height:1.75}
.article-body-eyebrow{display:block;margin:0 0 10px;line-height:1.5}
/* Eyebrow takes the place of the first block's top margin so the navy heading
   stays in its original spot instead of being pushed down. */
.article-body>.article-body-eyebrow+*{margin-top:0}
.article-body>p:first-child{font-size:1.08rem}
.article-body h2{margin:2.1em 0 .65em;color:var(--navy);font-size:clamp(1.75rem,3vw,2.3rem);line-height:1.12}
.article-body h3{margin:1.8em 0 .55em;color:var(--navy);font-size:1.38rem;line-height:1.2}
.article-body h4{margin:1.6em 0 .5em;color:var(--navy);font-size:1.12rem}
.article-body p{margin:0 0 1.25em}
.article-body ul,.article-body ol{margin:0 0 1.4em;padding-left:1.4em}
.article-body li{margin:.35em 0}
.article-body a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.article-body blockquote{margin:2em 0;padding:18px 24px;border-left:4px solid var(--blue);background:var(--paper);color:var(--navy);font-size:1.1rem}
.article-figure{margin:2.2em 0}
/* No CSS width: the img width attribute (the image's real size) applies, capped at the column. Small images (e.g. 300 px archive photos) aren't stretched; wide ones fill the column as before. */
.article-figure img{display:block;max-width:100%;height:auto;border-radius:4px}
.article-table-scroll{max-width:100%;margin:2em 0;overflow-x:auto;border:1px solid var(--line);border-radius:4px}
.article-table-scroll table{width:100%;border-collapse:collapse;background:#fff;font-size:.94rem;line-height:1.45}
.article-table-scroll caption{padding:12px 14px;background:var(--paper);color:var(--navy);font-weight:700;text-align:left}
.article-table-scroll th,.article-table-scroll td{min-width:8rem;padding:10px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-align:left;vertical-align:top;white-space:pre-line}
.article-table-scroll th{background:var(--paper);color:var(--navy);font-family:'Saira',sans-serif;font-weight:700}
.article-table-scroll th:last-child,.article-table-scroll td:last-child{border-right:0}
.article-table-scroll tbody tr:last-child td{border-bottom:0}
.article-faq{margin:2.2em 0;padding:5px 24px 18px;border-left:4px solid var(--blue);background:var(--paper)}
.article-faq h2{margin:1em 0 .55em;font-size:1.55rem}
.article-faq p:last-child{margin-bottom:0}
.article-related{align-self:start;position:sticky;top:118px;padding:24px;background:var(--paper);border-top:3px solid var(--blue)}
.article-related h2{margin:0 0 16px;color:var(--navy);font-size:1.18rem}
.article-related ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:20px}
.article-related li+li{padding-top:20px;border-top:1px solid var(--line)}
.article-related a{display:block;color:inherit;text-decoration:none}
.article-related-thumb{display:block;overflow:hidden;border-radius:4px;aspect-ratio:16/10;background:var(--navy-deep)}
.article-related-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.article-related a:hover .article-related-thumb img{transform:scale(1.04)}
.article-related-title{display:block;margin-top:11px;color:var(--navy);font-family:'Saira',sans-serif;font-size:.95rem;font-weight:600;line-height:1.28}
.article-related a:hover .article-related-title{color:var(--blue)}
@media(max-width:900px){.article-layout{grid-template-columns:minmax(0,760px)}.article-related{position:static}}
@media(max-width:620px){.article-layout{padding-top:46px}}