:root  {
   --blue: #004AAD;
   --aqua: #05D6D9;
   
}

*  {
   box-sizing: border-box;
   
}

body  {
   margin: 0;
   background: #f5f7fa;
   color: #303030;
   font-family: "Segoe UI", Arial, sans-serif;
   
}

.site-header  {
   background: #fff;
   border-bottom: 1px solid #e5eaf0;
   padding: 14px 22px;
   position: sticky;
   top: 0;
   z-index: 2;
   
}

.site-header-inner  {
   max-width: 1000px;
   margin: auto;
   display: flex;
   gap: 24px;
   align-items: center;
   justify-content: space-between;
   
}

.site-header img  {
   width: 155px;
   height: auto;
   
}
.site-header a  {
   color: var(--blue);
   font-weight: 700;
   text-decoration: none;
   
}

.site-nav  {
   display: flex;
   gap: 18px;
   flex-wrap: wrap;
   
}
.article  {
   max-width: 920px;
   margin: 38px auto 60px;
   padding: 42px;
   background: #fff;
   border-radius: 12px;
   box-shadow: 0 4px 20px rgba(0,0,0,.08);
   
}

.back  {
   display: inline-block;
   margin-bottom: 22px;
   
}
.article h1  {
   color: var(--blue);
   font-size: 2.25rem;
   line-height: 1.25;
   margin: 0 0 10px;
   
}
.meta  {
   color: #666;
   margin-bottom: 24px;
   
}
.article h2  {
   color: #0763BF;
   font-size: 1.55rem;
   margin: 34px 0 12px;
   padding-bottom: 7px;
   border-bottom: 2px solid #edf1f5;
   
}
.article h3  {
   color: #222;
   font-size: 1.2rem;
   margin: 24px 0 8px;
   
}
.article p, .article li  {
   font-size: 1.05rem;
   line-height: 1.8;
   
}
.article ul, .article ol  {
   padding-left: 25px;
   
}
.hero  {
   width: 100%;
   max-height: 390px;
   object-fit: cover;
   border-radius: 9px;
   margin: 16px 0 22px;
   
}

.image-credit  {
  color: #666;
  font-size: 0.82rem;
  line-height: 1.45;
  margin: -12px 0 22px;
}

.image-credit a  {
  color: var(--blue);
}
.note  {
   background: #f1f8ff;
   border-left: 4px solid var(--blue);
   border-radius: 0 8px 8px 0;
   padding: 16px 20px;
   margin: 24px 0;
   
}
.cta  {
   display: inline-block;
   background: var(--aqua);
   color: #08264e;
   font-weight: 700;
   padding: 12px 18px;
   border-radius: 7px;
   text-decoration: none;
   margin-top: 12px;
   
}

@media (max-width: 650px)  {
   .article  {
   margin: 20px 10px 35px;
   padding: 24px 18px;
   
}
.article h1  {
   font-size: 1.65rem;
   
}
.site-header-inner  {
   align-items: flex-start;
   flex-direction: column;
   gap: 8px;
   
}
.article p, .article li  {
   font-size: 1rem;
   
}
 
}