/* Blog styles. The token, reset, nav, button and footer rules are copied from
   site/index.html (lines 20-59, 352-358, 408-414, 435-448) so blog pages match
   the homepage; blog-only rules follow. All rules are scoped under #av-site. */
html,body{margin:0;padding:0;background:#FFFBF9}

#av-site{
  --av-navy:#0E2336; --av-navy2:#1A3550; --av-slate:#97B1CC; --av-cyan:#C3D5E2;
  --av-ink:#0E2336; --av-muted:#5A6C82; --av-ice:#F5F3F0; --av-line:#D8E0E5;
  --av-white:#FFFBF9; --av-accent:#97B1CC; --av-accent-strong:#3D6B96;
  --av-radius-lg:20px; --av-radius:16px; --av-radius-sm:10px;
  --av-shadow-sm:0 4px 20px rgba(14,35,54,.05);
  --av-shadow:0 10px 40px rgba(14,35,54,.08);
  --av-shadow-lg:0 25px 60px rgba(14,35,54,.14);
  font-family:Arial,Helvetica,sans-serif; color:var(--av-ink);
  background:var(--av-white); line-height:1.6; width:100%;
  -webkit-font-smoothing:antialiased; text-size-adjust:100%;
}
#av-site *,#av-site *::before,#av-site *::after{box-sizing:border-box}
#av-site h1,#av-site h2,#av-site h3,#av-site h4,#av-site p{margin:0}
#av-site a{color:inherit;text-decoration:none}
#av-site img{max-width:100%}
#av-site button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#av-site :focus-visible{outline:2px solid var(--av-accent);outline-offset:3px;border-radius:4px}

/* ---- nav --------------------------------------------------- */
#av-site .nav-wrap{height:86px;display:flex;align-items:center;justify-content:space-between;
  padding:0 5vw;position:relative;z-index:20;background:var(--av-navy);border-bottom:1px solid #ffffff18}
#av-site .brand{display:flex;align-items:center;gap:12px;color:#fff;font-size:20px;font-weight:700}
#av-site .brand .av-logo{display:block;width:190px;height:auto;filter:brightness(0) invert(1)}
#av-site .nav-links{display:flex;align-items:center;gap:30px}
#av-site .nav-links>a{color:#E8EEF2;font-size:14px}
#av-site .nav-links>a[aria-current="page"]{color:#fff;font-weight:700}
#av-site .menu-button{display:none;color:#fff}
#av-site .button{background:var(--av-accent);color:var(--av-navy);padding:18px 26px;display:inline-flex;
  align-items:center;justify-content:center;gap:24px;text-transform:uppercase;letter-spacing:.05em;
  font-weight:700;font-size:12px;border-radius:100px;box-shadow:0 10px 30px #5A6C8240;
  transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease}
#av-site .button:hover{transform:translateY(-3px);background:#AFC5D7;color:var(--av-navy);
  box-shadow:0 16px 36px #5A6C8250}
#av-site .button:active{transform:translateY(-1px)}
#av-site .button.small{padding:14px 20px}

/* ---- footer ------------------------------------------------ */
#av-site footer{padding:55px 7vw;background:#091824;color:#fff;display:grid;
  grid-template-columns:1fr 1fr;gap:25px}
#av-site footer>p{color:#8399a6;text-align:right}
#av-site footer>div{grid-column:1/-1;display:flex;gap:28px;border-top:1px solid #ffffff20;padding-top:30px}
#av-site footer a{color:#aebec7;font-size:13px}
#av-site footer>small{grid-column:1/-1;color:#647a86}

/* ---- blog -------------------------------------------------- */
#av-site .av-blog{min-height:60vh}
#av-site .blog-head{padding:75px 7vw 30px}
#av-site .kicker{text-transform:uppercase;letter-spacing:.14em;font-size:14px;
  font-weight:800;color:var(--av-accent-strong);display:flex;align-items:center;gap:10px}
#av-site h1{font-size:clamp(36px,4.5vw,60px);line-height:1.02;letter-spacing:-.045em;
  margin:24px 0 20px;font-weight:700}
#av-site .blog-head p.intro{max-width:640px;color:var(--av-muted);font-size:18px}
#av-site .blog-controls{display:flex;flex-wrap:wrap;gap:14px;padding:10px 7vw 30px}
#av-site .blog-controls input,#av-site .blog-controls select{border:1px solid var(--av-line);
  border-radius:var(--av-radius-sm);padding:14px;font:inherit;background:#fff;color:var(--av-ink);
  transition:border-color .2s ease}
#av-site .blog-controls input{flex:1 1 280px;min-width:0}
#av-site .blog-controls select{flex:0 1 240px;min-width:0}
#av-site .blog-controls input:focus,#av-site .blog-controls select:focus{border-color:var(--av-accent)}
#av-site .post-list{list-style:none;margin:0;padding:0 7vw 70px}
#av-site .post-card{border-top:1px solid var(--av-line);padding:26px 0}
#av-site .post-card[hidden]{display:none}
#av-site .post-card h2{font-size:24px;line-height:1.25;letter-spacing:-.02em}
#av-site .post-card h2 a{font-weight:700;overflow-wrap:anywhere}
#av-site .post-card h2 a:hover{color:var(--av-accent-strong)}
#av-site .post-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin:8px 0 10px;
  color:var(--av-muted);font-size:13px}
#av-site .post-card p{color:var(--av-ink);max-width:720px}
#av-site #blog-empty{padding:10px 7vw 70px;color:var(--av-muted);font-size:18px}
#av-site .post{max-width:760px;margin:0 auto;padding:60px 7vw}
#av-site .post .post-meta{margin:14px 0 36px}
#av-site .post-body p{font-size:17px;line-height:1.7;margin-bottom:22px;overflow-wrap:anywhere}
#av-site .post-source{font-style:italic;color:var(--av-muted);margin-top:34px;overflow-wrap:anywhere}
#av-site .post-source a{color:var(--av-accent-strong);font-style:normal;text-decoration:underline;overflow-wrap:anywhere}
#av-site .post-back{display:inline-block;margin-top:30px;color:var(--av-accent-strong);font-weight:700}
#av-site .av-blog img{max-width:100%}

/* ---- responsive -------------------------------------------- */
@media(max-width:900px){
  #av-site .nav-wrap{height:70px}
  #av-site .menu-button{display:block}
  #av-site .nav-links{display:none;position:absolute;top:70px;left:0;right:0;background:var(--av-navy);
    padding:30px 5vw;flex-direction:column;align-items:stretch;box-shadow:0 15px 30px #0002}
  #av-site .nav-links.open{display:flex}
  #av-site .nav-links>a{color:#fff}
}
@media(max-width:560px){
  #av-site footer{grid-template-columns:1fr}
  #av-site footer>p{text-align:left}
  #av-site footer>div{flex-wrap:wrap}
  #av-site .blog-head{padding-top:50px}
}
