/* Carry the hero ceiling's charcoal gray into the header without changing the photo. */
body>header{background:#505050;color:#fff}
body>header .navlinks a{opacity:1}
body>header .navlinks a[aria-current=page]{border-color:#fff}
body>header a:focus-visible,body>header button:focus-visible{outline:2px solid #fff;outline-offset:4px}
body>header .menu{color:#fff}
body>header .nav{column-gap:24px;row-gap:4px}
body>header .brand{flex:0 1 440px;width:440px;max-width:440px;min-width:0}
body>header .brand img{width:100%;max-width:100%;height:auto;filter:brightness(0) invert(1)}
body>header .navlinks{flex-shrink:0}
body>header+main>.hero::after{background:linear-gradient(180deg,#505050,transparent 48px),linear-gradient(90deg,#000b,#0007 55%,#0003)}
@media(max-width:1024px){
 body>header .nav{flex-wrap:nowrap;column-gap:12px}
 body>header .brand{flex:0 1 80%;width:80%;max-width:min(440px,calc(100% - 68px))}
 body>header .menu{display:grid;place-items:center;flex:0 0 56px;min-width:56px;min-height:56px;margin-left:auto;padding:0;font-size:48px;line-height:1}
 body>header .navlinks{display:none}
 body>header .navlinks.is-open{display:flex;position:absolute;left:16px;right:16px;top:100%;padding:20px;align-items:stretch;flex-direction:column;gap:0;background:var(--ink);color:#fff;box-shadow:0 12px 25px #0003}
 body>header .navlinks.is-open a{padding:12px}
 body>header .navlinks.is-open a:focus-visible{outline-color:#fff}
 body>header .navlinks.is-open a[aria-current=page]{border-color:#fff}
}
@media(max-width:760px){
 body>header+main>.hero::after{background:linear-gradient(180deg,#505050,transparent 48px),linear-gradient(90deg,#000b,#0007)}
}