:root {
  --ha-navy: #194480;
  --ha-ink: #14304b;
  --ha-blue: #2371a8;
  --ha-sky: #3db9ed;
  --ha-pale: #eaf8fd;
  --ha-paper: #f8fafa;
  --ha-white: #ffffff;
  --ha-gray: #6d6e71;
  --ha-line: #dbe8ee;
  --ha-shadow: 0 18px 50px rgba(20, 48, 75, 0.1);
  font-family: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ha-paper); color: var(--ha-ink); font-size: 18px; line-height: 1.72; }
a { color: var(--ha-blue); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--ha-navy); }
:focus-visible { outline: 3px solid var(--ha-sky); outline-offset: 4px; }
.site-header { background: var(--ha-white); border-bottom: 1px solid var(--ha-line); }
.site-nav { max-width: 1280px; margin: 0 auto; min-height: 76px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand-mark { display: block; width: 180px; line-height: 0; text-decoration: none; white-space: nowrap; }
.brand-mark img { display: block; height: auto; width: 180px; }
.nav-links { display: flex; align-items: center; gap: clamp(16px, 3vw, 38px); }
.nav-links a { color: var(--ha-ink); font-size: 14px; font-weight: 700; text-decoration: none; }
.nav-links a:hover { color: var(--ha-blue); }
main { overflow: hidden; }
.blog-hero { background: var(--ha-navy); color: var(--ha-white); padding: clamp(72px, 10vw, 150px) max(28px, calc((100vw - 1180px) / 2)); position: relative; }
.blog-hero::after { content: ""; width: min(42vw, 520px); height: min(42vw, 520px); position: absolute; right: -8vw; top: -16vw; border: 1px solid rgba(61,185,237,.42); border-radius: 50%; box-shadow: 0 0 0 34px rgba(61,185,237,.08), 0 0 0 70px rgba(61,185,237,.05); }
.eyebrow { color: var(--ha-blue); font-size: 12px; font-weight: 800; letter-spacing: .15em; line-height: 1.4; margin: 0 0 16px; text-transform: uppercase; }
.blog-hero .eyebrow { color: var(--ha-sky); }
h1, h2, h3, h4 { color: var(--ha-navy); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; margin: 0 0 24px; text-wrap: pretty; }
.blog-hero h1 { color: var(--ha-white); font-size: clamp(42px, 7vw, 90px); max-width: 920px; }
.hero-lead { color: rgba(255,255,255,.82); font-size: clamp(19px, 2vw, 24px); line-height: 1.55; margin: 28px 0 52px; max-width: 720px; }
.hero-rule { border-top: 1px solid rgba(255,255,255,.34); display: flex; flex-wrap: wrap; gap: 14px 30px; padding-top: 16px; color: rgba(255,255,255,.72); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.featured-section, .article-list, .source-note { max-width: 1280px; margin: 0 auto; padding: clamp(60px, 8vw, 104px) 28px; }
.featured-section { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); gap: 42px; }
.section-heading h2 { font-size: clamp(32px, 4vw, 54px); }
.featured-links { border-top: 1px solid var(--ha-line); list-style: none; margin: 0; padding: 0; }
.featured-links li { border-bottom: 1px solid var(--ha-line); padding: 20px 0; }
.featured-links a { color: var(--ha-navy); font-size: clamp(20px, 2vw, 28px); font-weight: 700; line-height: 1.25; text-decoration: none; }
.featured-links a::after { content: "↗"; color: var(--ha-sky); font-size: .8em; margin-left: 10px; }
.article-list { border-top: 1px solid var(--ha-line); }
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.article-card { background: var(--ha-white); border: 1px solid var(--ha-line); display: flex; flex-direction: column; min-height: 320px; padding: 28px; transition: box-shadow 180ms cubic-bezier(.23,1,.32,1), transform 180ms cubic-bezier(.23,1,.32,1); }
.article-card:hover { box-shadow: var(--ha-shadow); transform: translateY(-3px); }
.article-card h2 { font-size: clamp(24px, 2.2vw, 34px); }
.article-card h2 a { color: var(--ha-navy); text-decoration: none; }
.article-card p:not(.eyebrow) { color: var(--ha-gray); margin-top: 0; }
.card-meta { align-items: center; border-top: 1px solid var(--ha-line); display: flex; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 17px; color: var(--ha-gray); font-size: 13px; font-weight: 700; }
.text-link { font-weight: 700; }
.source-note { background: var(--ha-pale); margin: 0 auto; max-width: none; padding-left: max(28px, calc((100vw - 1224px) / 2)); padding-right: max(28px, calc((100vw - 1224px) / 2)); }
.source-note p:last-child { max-width: 720px; margin: 0; }
.site-footer { background: var(--ha-ink); color: rgba(255,255,255,.7); padding: 30px 28px; }
.site-footer .site-nav { min-height: 48px; padding: 0; }
.site-footer .brand-mark, .site-footer .nav-links a { color: var(--ha-white); }
.site-footer p { max-width: 1280px; margin: 22px auto 0; font-size: 13px; }
.article-shell { max-width: 1180px; margin: 0 auto; padding: clamp(54px, 8vw, 100px) 28px 100px; }
.article-header { max-width: 940px; margin: 0 auto 58px; }
.back-link { display: inline-block; font-size: 14px; font-weight: 700; margin-bottom: 52px; text-decoration: none; }
.article-header h1 { font-size: clamp(42px, 6vw, 78px); max-width: 1000px; }
.article-excerpt { color: var(--ha-gray); font-size: clamp(20px, 2.2vw, 27px); line-height: 1.48; margin: 25px 0 25px; max-width: 830px; }
.article-meta { align-items: center; border-top: 1px solid var(--ha-line); color: var(--ha-gray); display: flex; flex-wrap: wrap; font-size: 13px; font-weight: 700; gap: 16px 28px; justify-content: space-between; padding-top: 15px; }
.article-cover { margin: 0 auto 76px; max-width: 1180px; }
.article-cover img { background: var(--ha-pale); display: block; height: auto; max-height: 660px; object-fit: cover; width: 100%; }
.article-cover figcaption { color: var(--ha-gray); font-size: 13px; margin-top: 11px; }
.article-layout { display: grid; grid-template-columns: minmax(0, 760px) minmax(190px, 260px); gap: clamp(36px, 8vw, 110px); justify-content: center; }
.article-prose { min-width: 0; }
.article-prose > p, .article-prose > ul, .article-prose > ol, .article-prose > blockquote, .article-prose > pre, .article-prose > table { margin-left: 0; margin-right: 0; }
.article-prose p { margin-bottom: 26px; }
.article-prose h2 { border-top: 1px solid var(--ha-line); font-size: clamp(29px, 3.6vw, 45px); margin-top: 65px; padding-top: 21px; }
.article-prose h3 { font-size: clamp(23px, 2.7vw, 32px); margin-top: 40px; }
.article-prose ul, .article-prose ol { margin-bottom: 28px; padding-left: 28px; }
.article-prose li { margin: 8px 0; }
.article-prose blockquote { border-left: 4px solid var(--ha-sky); color: var(--ha-navy); font-size: 23px; font-weight: 700; margin: 38px 0; padding: 8px 0 8px 25px; }
.article-prose code { background: var(--ha-pale); border-radius: 4px; padding: 2px 6px; }
.article-prose pre { background: var(--ha-ink); color: var(--ha-white); overflow-x: auto; padding: 22px; }
.article-prose pre code { background: transparent; padding: 0; }
.article-prose table { border-collapse: collapse; font-size: 16px; margin-bottom: 30px; width: 100%; }
.article-prose th, .article-prose td { border: 1px solid var(--ha-line); padding: 10px 12px; text-align: left; }
.article-prose th { background: var(--ha-pale); }
.article-attribution { border-top: 1px solid var(--ha-line); margin-top: 70px; padding-top: 26px; color: var(--ha-gray); font-size: 15px; }
.related-rail { align-self: start; border-left: 1px solid var(--ha-line); margin-top: 8px; padding-left: 24px; position: sticky; top: 20px; }
.related-rail h2 { font-size: 24px; }
.related-rail ul { list-style: none; margin: 0; padding: 0; }
.related-rail li { border-top: 1px solid var(--ha-line); padding: 13px 0; }
.related-rail a { color: var(--ha-navy); font-size: 15px; font-weight: 700; line-height: 1.4; text-decoration: none; }
@media (max-width: 820px) {
  .site-nav { align-items: flex-start; flex-direction: column; gap: 18px; padding-bottom: 20px; padding-top: 22px; }
  .nav-links { gap: 18px; width: 100%; justify-content: space-between; }
  .featured-section, .article-layout { grid-template-columns: 1fr; }
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related-rail { border-left: 0; border-top: 1px solid var(--ha-line); padding: 25px 0 0; position: static; }
  .site-footer .site-nav { padding: 0; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .site-nav, .featured-section, .article-list, .article-shell { padding-left: 20px; padding-right: 20px; }
  .article-grid { grid-template-columns: 1fr; }
  .blog-hero { padding-left: 20px; padding-right: 20px; }
  .nav-links { flex-wrap: wrap; justify-content: flex-start; }
  .article-meta { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}