/* Draft home page: transparent hero header with black top bar */
:root{--bar-h:48px;--head-h:88px;--hdr:calc(var(--bar-h) + var(--head-h))}
.site-header{position:fixed;top:0;left:0;right:0;z-index:40}
.topbar{height:var(--bar-h);background:#000;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--gutter);font-size:1rem;font-weight:500;line-height:1}
.topbar a{color:#fff;text-decoration:none;white-space:nowrap}
.topbar a:hover{text-decoration:underline;text-decoration-color:var(--amber);text-underline-offset:5px;text-decoration-thickness:2px}
.site-header .header{height:var(--head-h);padding-top:0;padding-bottom:0;background:transparent;transition:background-color .25s ease,backdrop-filter .25s ease}
.site-header.is-scrolled .header{background:rgba(14,24,33,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.site-header .logo__word,.site-header .logo__hey{color:#fff}
.site-header .logo__mark text{fill:#fff}
.site-header .nav a{color:#fff}
.site-header .nav a:hover{color:#fff;border-bottom-color:var(--amber)}
.site-header .btn--denim{background:var(--amber);color:var(--denim)}
.site-header .btn--denim:hover{background:#F7B65A}
section[id]{scroll-margin-top:calc(var(--head-h) + 12px)}
@media (max-width:980px){:root{--head-h:72px}}
@media (max-width:560px){:root{--bar-h:42px;--head-h:64px}.topbar{font-size:.9rem}}

/* Inner pages: header sits over page content, so it is solid denim */
body.inner main{padding-top:var(--hdr)}
.site-header--solid .header{background:var(--denim)}
.site-header--solid.is-scrolled .header{background:var(--denim)}