:root{
  --navy:#0B1F3A; --navy-2:#102848; --navy-3:#1B3963;
  --ua-blue:#0057B7; --ua-yellow:#FFD500; --celeste:#74ACDF; --sun:#F6B40E;
  --ink:#F3F7FC; --ink-muted:#A9BBD4; --rule:#24416B; --tint:#16335C;
  --serif:'Literata', Georgia, 'Times New Roman', serif;
  --sans:'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: dark;
  box-sizing:border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-padding-top: calc(76px + env(safe-area-inset-top,0px));}
body{margin:0; background:var(--navy); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;}
img,svg{max-width:100%;}
a{color:var(--celeste);}
h1,h2,h3{font-family:var(--serif); margin:0; line-height:1.2; font-weight:600; letter-spacing:-.01em;}
:focus-visible{outline:3px solid var(--sun); outline-offset:3px; border-radius:4px;}
.wrap{max-width:1140px; margin:0 auto; padding:0 24px;}
.narrow{max-width:760px;}

.ribbon{display:grid; grid-template-columns:1fr 1fr; height:6px;}
.ribbon .ua{background:linear-gradient(var(--ua-blue) 50%, var(--ua-yellow) 50%);}
.ribbon .ar{background:linear-gradient(var(--celeste) 33.3%, #fff 33.3% 66.6%, var(--celeste) 66.6%);}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--sans); font-weight:600; font-size:.95rem; line-height:1.2;
  padding:13px 22px; border-radius:999px; text-decoration:none; cursor:pointer; border:1.5px solid transparent; text-align:center;}
.btn-yellow{background:var(--ua-yellow); color:var(--navy);}
.btn-yellow:hover{background:#ffe04d;}
.btn-outline{background:transparent; color:var(--ink); border-color:rgba(255,255,255,.3);}
.btn-outline:hover{border-color:var(--celeste); color:var(--celeste);}

.site-header{position:sticky; top:0; z-index:40; background:rgba(11,31,58,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding-top:env(safe-area-inset-top,0px); border-bottom:1px solid rgba(255,255,255,.14);}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:14px; max-width:1140px; margin:0 auto; padding:12px 24px;}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:700; font-size:1.2rem; color:var(--ink); text-decoration:none; white-space:nowrap;}
.logo-mark{width:28px; height:28px; flex:none;}
.header-right{display:flex; align-items:center; gap:12px;}
.nav-link{color:var(--ink-muted); text-decoration:none; font-weight:600; font-size:.92rem; white-space:nowrap;}
.nav-link:hover,.nav-link[aria-current="page"]{color:var(--ink);}
.btn-header{display:none; padding:9px 16px; font-size:.88rem; white-space:nowrap;}
.lang-switch{display:flex; background:rgba(255,255,255,.08); border-radius:999px; padding:3px;}
.lang-switch button{background:transparent; border:0; color:var(--ink-muted); font:600 .78rem/1 var(--sans); padding:8px 11px; border-radius:999px; cursor:pointer;}
.lang-switch button.active{background:var(--ua-yellow); color:var(--navy);}

.blog-hero{padding-top:64px; padding-bottom:36px;}
.blog-hero h1{font-size:clamp(2.2rem, 5vw, 3.4rem); margin-bottom:12px;}
.blog-hero p{margin:0; color:var(--ink-muted); font-size:1.12rem; max-width:52ch;}

.post-grid{display:grid; grid-template-columns:1fr; gap:22px; padding-bottom:80px;}
.post-card{position:relative; display:flex; flex-direction:column; border:1px solid var(--rule); border-radius:18px; padding:26px 24px 24px; text-decoration:none; color:inherit; overflow:hidden; transition:border-color .15s ease;}
.post-card::before{content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--celeste);}
.post-card:hover{border-color:var(--celeste);}
.post-card .cover{font-size:2rem; line-height:1; margin-bottom:14px;}
.post-card h2{font-size:1.3rem; margin-bottom:10px;}
.post-card p{margin:0 0 18px; color:var(--ink-muted); font-size:.98rem;}
.post-meta{font-size:.85rem; color:var(--ink-muted); display:flex; gap:10px; flex-wrap:wrap;}
.post-card .more{margin-top:auto; padding-top:14px; font-weight:600; color:var(--ua-yellow);}
.empty{color:var(--ink-muted); padding:40px 0 80px;}

.article{padding-top:48px; padding-bottom:30px;}
.back{display:inline-block; margin-bottom:26px; color:var(--ink-muted); text-decoration:none; font-weight:600; font-size:.92rem;}
.back:hover{color:var(--ink);}
.article .cover{font-size:2.6rem; line-height:1; margin-bottom:16px;}
.article h1{font-size:clamp(1.9rem, 4.4vw, 2.8rem); margin-bottom:14px;}
.article .post-meta{margin-bottom:32px;}
.prose{font-size:1.06rem;}
.prose p{margin:0 0 1.1em;}
.prose h2{font-size:1.5rem; margin:1.8em 0 .6em;}
.prose h3{font-size:1.2rem; margin:1.5em 0 .5em;}
.prose ul{margin:0 0 1.2em; padding:0; list-style:none; display:grid; gap:8px;}
.prose li{position:relative; padding-left:28px;}
.prose li::before{content:""; position:absolute; left:0; top:.32em; width:18px; height:18px; border-radius:50%;
  background:var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%2374ACDF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;}
.prose strong{color:#fff;}
.disclaimer{font-size:.88rem; color:var(--ink-muted); font-style:italic; border-top:1px solid var(--rule); padding-top:16px; margin-top:28px;}

.cta-box{margin:40px 0 20px; padding:28px 26px; border-radius:18px; border:1px solid rgba(255,213,0,.45); background:rgba(255,213,0,.06);}
.cta-box h2{font-size:1.4rem; margin-bottom:8px;}
.cta-box p{margin:0 0 18px; color:var(--ink-muted);}

.related{padding-top:20px; padding-bottom:80px;}
.related h2{font-size:1.5rem; margin-bottom:18px;}

footer.site-footer{border-top:1px solid rgba(255,255,255,.14); padding:26px 0 34px; color:var(--ink-muted); font-size:.88rem;}
.site-footer .footer-inner{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;}
footer.site-footer a{color:var(--ink-muted);}

@media (min-width:680px){
  .post-grid{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:960px){
  .btn-header{display:inline-flex;}
  .post-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:600px){
  .header-right .nav-link.blog-link{display:none;}
}
@media (max-width:430px){
  .logo{font-size:1rem;} .logo-mark{width:24px;height:24px;}
  .header-inner{padding:12px 14px; gap:8px;} .header-right{gap:10px;}
  .wrap{padding-left:18px; padding-right:18px;}
}
@media (max-width:359px){
  .header-right .nav-link{display:none;}
}
.lang-switch a{display:inline-block; color:var(--ink-muted); font:600 .78rem/1 var(--sans); padding:8px 11px; border-radius:999px; text-decoration:none;}
.lang-switch a.active{background:var(--ua-yellow); color:var(--navy);}
.lang-switch a:hover:not(.active){color:var(--ink);}