@media(max-width:900px){
  .mobile-bar{grid-template-columns:1fr 1fr .55fr}
  .mobile-bar a:nth-child(2){background:var(--red)}
  .mobile-bar a:last-child{background:#2a2a24}
}

.blog-page{min-height:100vh;background:#0b0b09}
.blog-intro{min-height:78vh;padding:clamp(9rem,18vw,14rem) clamp(1.2rem,10vw,10rem) 6rem;background:radial-gradient(circle at 75% 35%,#ffd20a26,transparent 28%),repeating-linear-gradient(90deg,transparent 0 170px,#ffffff07 170px 171px)}
.blog-intro h1{font:900 clamp(5rem,12vw,11rem)/.82 "Barlow Condensed",sans-serif;letter-spacing:-.04em;margin:0;text-transform:uppercase}
.blog-intro>p:not(.eyebrow){max-width:650px;color:#c5c2b9;font-size:1.1rem;margin:2rem 0}
.blog-page .topbar{position:absolute}
.blog-page .footer{padding-bottom:4rem}
@media(max-width:900px){
  .blog-page .topbar nav{display:none}
  .blog-intro{min-height:72vh;padding-top:9rem}
  .blog-intro h1{font-size:clamp(4rem,18vw,7rem)}
}
.footer-social{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:1rem}.footer-social a{display:inline-flex;align-items:center;min-height:44px;font-size:1rem;text-underline-offset:4px}.footer-social a:hover{color:#fff}.footer-social a:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}
@media(max-width:620px){.topbar .logo{min-width:0;flex:1}.topbar .logo img{width:100%;max-width:235px;height:auto}.topbar .header-call{flex-shrink:0;font-size:1rem;white-space:nowrap;min-height:44px;display:flex;align-items:center}.topbar .header-call span{display:none}.topbar .header-call:after{content:none}}
