:root { --content-measure: 760px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.hero-copy h1 .hero-topic { display: block; margin-top: 24px; font-family: var(--font-sans); font-size: clamp(10px, 1.05vw, 16px); font-weight: 400; line-height: 1.5; letter-spacing: .16em; color: var(--brand-accent-soft); }
.knowledge-section { border-top: 1px solid var(--brand-line); }
.knowledge-section .section-heading > div { max-width: 390px; font-size: 14px; color: var(--brand-muted); }
.knowledge-section .text-link { margin-top: 24px; color: var(--brand-text); }
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.guide-card { position: relative; display: flex; flex-direction: column; padding: 30px; background: var(--brand-surface); border: 1px solid var(--brand-line); min-height: 360px; transition: border-color .2s, background .2s; }
.guide-card:hover, .guide-card:focus-within { border-color: var(--brand-accent); background: color-mix(in srgb, var(--brand-surface), var(--brand-accent) 3%); }
.guide-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 30px; }
.guide-card-top .eyebrow { color: var(--brand-muted); font-size: 10px; letter-spacing: .08em; }
.guide-card-arrow { font-size: 30px; line-height: 1; color: var(--brand-accent); transition: transform .2s; }
.guide-card:hover .guide-card-arrow { transform: translate(3px, -3px); }
.guide-card h3 { font-size: clamp(21px, 1.65vw, 28px); line-height: 1.35; letter-spacing: -.03em; margin-bottom: 18px; }
.guide-card h3 a::after { content: ''; position: absolute; inset: 0; }
.guide-card p { font-size: 13px; line-height: 1.8; color: var(--brand-muted); margin-bottom: 28px; }
.guide-card-bottom { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--brand-line); padding-top: 18px; margin-top: auto; font-size: 10px; }
.guide-card-bottom > span:last-child { font-weight: 600; }
.editorial-page { background: var(--brand-bg); }
.editorial-intro, .article-header { padding-top: calc(var(--header-height) + 38px); }
.breadcrumbs { font-size: 11px; color: var(--brand-muted); margin-bottom: 66px; line-height: 1.9; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.breadcrumbs li + li::before { content: '/'; margin-right: 14px; opacity: .5; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs li:last-child { max-width: 100%; }
.editorial-intro-grid { display: grid; grid-template-columns: 1.6fr 1fr; align-items: end; gap: 7%; margin-top: 28px; }
.editorial-intro h1 { font-size: clamp(37px, 5.7vw, 84px); line-height: 1.08; font-weight: 600; letter-spacing: -.04em; }
.editorial-intro-grid > p { max-width: 380px; font-size: 14px; color: var(--brand-muted); }
.guide-search { display: grid; grid-template-columns: 1fr 260px auto; gap: 14px; margin-top: 60px; padding-block: 30px; border-block: 1px solid var(--brand-line); }
.guide-search input, .guide-search select { width: 100%; height: 60px; padding: 15px 20px; border: 1px solid var(--brand-line); background: var(--brand-surface); font-size: 13px; }
.guide-search-input { position: relative; }
.guide-search-input input { padding-right: 54px; }
.guide-search-input button { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; font-size: 24px; }
.guide-search-input button:hover { background: var(--brand-bg); }
.guide-results { padding-block: 42px 80px; }
.results-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.results-heading h2 { font-size: 19px; text-transform: none; letter-spacing: -.02em; }
.results-heading > p { font-size: 11px; color: var(--brand-muted); }
.editorial-empty { padding-block: 70px; }
.editorial-empty h3 { margin-bottom: 16px; font-size: 26px; }
.editorial-empty p { color: var(--brand-muted); max-width: 620px; margin-block: 20px; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 30px; padding-top: 40px; font-size: 13px; }
.pagination a { padding: 10px; border-bottom: 1px solid var(--brand-line); }
.pagination a:hover { border-color: var(--brand-accent); }
.article-header { padding-bottom: 46px; border-bottom: 1px solid var(--brand-line); }
.article-header .breadcrumbs { margin-bottom: 50px; }
.article-header h1 { margin-block: 25px; font-size: clamp(34px, 4.5vw, 68px); max-width: 1080px; letter-spacing: -.045em; line-height: 1.14; }
.article-lead { max-width: 830px; font-size: clamp(15px, 1.3vw, 19px); color: var(--brand-muted); }
.article-meta { display: flex; flex-wrap: wrap; gap: 12px 26px; font-size: 11px; color: var(--brand-muted); margin-top: 30px; }
.article-meta span + span::before { content: '·'; margin-right: 26px; }
.article-layout { display: grid; grid-template-columns: 280px minmax(0, var(--content-measure)); gap: clamp(36px, 7vw, 120px); justify-content: center; padding-top: 50px; }
.article-toc { position: sticky; top: calc(var(--header-height) + 24px); max-height: calc(100svh - var(--header-height) - 50px); overflow: auto; padding-right: 16px; }
.article-toc h2 { font-size: 11px; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 18px; }
.article-toc li { margin-bottom: 4px; }
.article-toc li a { display: block; padding: 8px 12px; border-left: 1px solid var(--brand-line); font-size: 12px; color: var(--brand-muted); line-height: 1.7; }
.article-toc li a:hover, .article-toc li a[aria-current] { color: var(--brand-text); border-color: var(--brand-accent); background: color-mix(in srgb, var(--brand-surface), transparent 45%); }
.article-toc-contact { display: block; font-size: 11px; font-weight: 600; margin-top: 24px; padding: 18px 12px; border-block: 1px solid var(--brand-line); }
.article-toc-contact:hover { color: var(--brand-accent); }
.article-body { font-size: 16px; line-height: 1.9; overflow-wrap: anywhere; }
.article-body > p, .article-body > ul, .article-body > ol { margin-bottom: 24px; }
.article-body h2 { font-size: clamp(25px, 2.4vw, 36px); text-transform: none; letter-spacing: -.025em; line-height: 1.3; margin-block: 48px 20px; }
.article-body h3 { font-size: 23px; line-height: 1.4; margin-block: 32px 16px; }
.article-body a { text-decoration: underline; text-decoration-color: var(--brand-accent); text-underline-offset: 4px; }
.article-body a:hover { text-decoration-thickness: 2px; }
.article-body ul, .article-body ol { padding-left: 24px; }
.article-body ul > li { list-style: disc; padding-left: 6px; margin-bottom: 10px; }
.article-body ol > li { list-style: decimal; padding-left: 6px; margin-bottom: 10px; }
.article-body blockquote { border-left: 3px solid var(--brand-accent); padding: 22px 26px; margin-block: 30px; background: var(--brand-surface); }
.article-body code { padding: 2px 6px; background: var(--brand-surface); font-size: .88em; }
.article-table { overflow-x: auto; margin-block: 30px; scrollbar-gutter: stable; }
.article-table table { border-collapse: collapse; width: 100%; font-size: 13px; min-width: 520px; text-align: left; }
.article-table th { background: var(--brand-dark); color: var(--brand-light); font-weight: 400; }
.article-table td, .article-table th { padding: 16px 18px; border-bottom: 1px solid var(--brand-line); vertical-align: top; }
.article-table tr:nth-child(even) td { background: var(--brand-surface); }
.article-sources { border-top: 1px solid var(--brand-line); margin-top: 50px; font-size: 13px; color: var(--brand-muted); }
.article-sources h2 { font-size: 22px; }
.article-signoff { margin-top: 44px; border-top: 1px solid var(--brand-line); padding-top: 24px; font-size: 12px; color: var(--brand-muted); }
.article-signoff p { margin-top: 12px; }
.related-guides { border-top: 1px solid var(--brand-line); padding-block: 55px; margin-top: 80px; }
.editorial-cta { margin-block: 30px 90px; padding: clamp(32px, 5vw, 70px); background: var(--brand-dark); color: var(--brand-light); }
.editorial-cta .eyebrow { color: var(--brand-accent-soft); }
.editorial-cta h2 { font-size: clamp(29px, 3.5vw, 54px); line-height: 1.2; margin-block: 25px 32px; text-transform: none; }
.editorial-footer { background: var(--brand-dark-nav); color: var(--brand-light); padding-block: 50px 35px; }
.editorial-footer .wrap { display: grid; grid-template-columns: 1fr auto; gap: 25px; }
.editorial-footer p { font-size: 13px; color: var(--inverse-muted); }
.editorial-footer .wrap > div { display: flex; gap: 25px; flex-wrap: wrap; grid-column: 1 / -1; font-size: 11px; }
.editorial-footer small { grid-column: 1 / -1; color: var(--inverse-muted); font-size: 10px; padding-top: 24px; border-top: 1px solid var(--inverse-line); }
.editorial-footer a:hover { color: var(--brand-accent-soft); }
.preview-banner { position: relative; margin-top: var(--header-height); background: var(--brand-accent-soft); color: var(--brand-dark); padding: 15px var(--gutter); font-size: 13px; }
.preview-banner + article .article-header { padding-top: 38px; }
.preview-banner a { text-decoration: underline; margin-left: 15px; }
.direct-contact-card { padding: clamp(28px, 4vw, 54px); border: 1px solid var(--brand-line); background: var(--brand-surface); }
.direct-contact-card h3 { font-size: clamp(30px, 3.3vw, 50px); line-height: 1.2; letter-spacing: -.035em; margin-block: 24px; }
.direct-contact-card > p:not(.eyebrow) { font-size: 14px; color: var(--brand-muted); margin-bottom: 30px; }
.direct-contact-card .text-link { display: flex; margin-top: 16px; }
.direct-contact-card .contact-card-note { margin-top: 30px; font-size: 11px !important; }
@media (max-width: 1100px) { .article-layout { grid-template-columns: 230px minmax(0, 1fr); gap: 38px; } .guide-card { padding: 24px; } .guide-card-bottom { flex-direction: column; gap: 8px; } }
@media (max-width: 800px) { .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .knowledge-section .guide-card:last-child { grid-column: 1 / -1; } .editorial-intro-grid { grid-template-columns: 1fr; gap: 28px; } .guide-search { grid-template-columns: 1fr auto; } .guide-search-input { grid-column: 1 / -1; } .article-layout { grid-template-columns: 1fr; } .article-toc { position: static; max-height: none; padding-right: 0; } .article-toc ol { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; } .article-toc-contact { display: none; } .breadcrumbs { margin-bottom: 38px; } .article-body { font-size: 15px; } .editorial-footer .wrap { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .guide-grid { grid-template-columns: 1fr; } .guide-card { min-height: 315px; } .guide-card-bottom { flex-direction: row; } .guide-search { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; } .guide-search select { font-size: 12px; padding-inline: 12px; } .guide-search .button { padding-inline: 16px; gap: 15px; } .article-header h1 { font-size: 34px; } .article-toc ol { grid-template-columns: 1fr; } .article-meta { gap: 8px 14px; } .article-meta span + span::before { margin-right: 14px; } .related-guides .results-heading { align-items: flex-start; flex-direction: column; } .editorial-cta .button { font-size: 9px; gap: 12px; width: 100%; padding-inline: 18px; } .hero-copy h1 .hero-topic { letter-spacing: .09em; font-size: 9px; margin-top: 16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }
@media (forced-colors: active) { * { scrollbar-color: auto; } .guide-card, .editorial-cta, .article-table th { border: 1px solid CanvasText; } }
@media print { .site-header, .editorial-footer, .article-sidebar, .related-guides, .editorial-cta, .preview-banner { display: none; } .article-header { padding-top: 0; } .article-layout { display: block; width: 100%; } .article-body { font-size: 11pt; } .article-body a { text-decoration: underline; } }