/* Keep the supplied full Maahir identity legible, rather than reducing it to an icon. */
header{padding:10px 4%;gap:22px}
header .brand{gap:18px;flex-shrink:0}
header .brand img{width:132px;height:132px;object-fit:contain;flex-shrink:0}
header .brand span{font-size:2rem;letter-spacing:-.035em;line-height:1.2}
header .brand small{font-size:.875rem;font-weight:600;letter-spacing:0;line-height:1.5;margin-top:7px;color:#426155}
header .brand .brand-promise{font-size:.875rem;font-weight:400;letter-spacing:0;line-height:1.4;display:block;margin-top:3px;color:#526775}
.long-read section{scroll-margin-top:174px}
.article-side{top:172px}
footer .brand{display:block;margin:0 0 18px}
footer .brand img{display:block;width:176px;height:176px;object-fit:contain;background:#fff;border-radius:8px}
@media(max-width:1180px){
 #menu-toggle{display:block;background:transparent;border:1px solid #cbd9d4;border-radius:5px;padding:9px 14px;margin-left:auto}
 header nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;padding:22px 4%;flex-direction:column;align-items:stretch;border-bottom:1px solid #ccd9d3;max-height:65vh;overflow:auto}
 header nav.open{display:flex}
 header nav a{font-size:1rem;padding:7px}
}
@media(max-width:600px){
 header{gap:10px;padding:8px 4%}
 header .brand{gap:0}
 header .brand img{width:112px;height:112px}
 header .brand>span{display:none}
 header .button{padding:11px 12px;font-size:.875rem}
 #menu-toggle{padding:9px 11px;font-size:.875rem}
 .long-read section{scroll-margin-top:144px}
}