/* Header: no surface at the top of the page; the cream field arrives once
   you scroll. On the dark home hero the mark and nav read in cream. */
.hdr{transition:background-color .6s var(--ease),box-shadow .6s var(--ease)}
.hdr.hdr--clear{background:transparent;box-shadow:none;backdrop-filter:none}
.hdr .brand img,.hdr .brand span,.hdr .nav a,.hdr .burger i{transition:color .6s var(--ease),filter .6s var(--ease),border-color .6s var(--ease),background-color .6s var(--ease)}
.group-home .hdr.hdr--clear .brand span,.group-home .hdr.hdr--clear .nav a{color:rgba(255,251,243,.86)}
.group-home .hdr.hdr--clear .nav a:hover{color:#FFFBF3}
  /* Inverting the mark turned its gold ring blue once the mark became
     two-tone. The dark hero gets its own light mark instead. */
  .brand .mark--light{display:none}
  .group-home .hdr.hdr--clear .brand .mark--ink{display:none}
  .group-home .hdr.hdr--clear .brand .mark--light{display:block}
.group-home .hdr.hdr--clear .burger i{background:#FFFBF3}
.group-home .hdr.hdr--clear .nav a.nav-access{color:#FFFBF3;border-color:rgba(255,251,243,.55);background:transparent}
.group-home .hdr.hdr--clear .nav a.nav-access::before{background:#E3C88F}
.group-home .hdr.hdr--clear .nav a::after{background:#FFFBF3}
@media(prefers-reduced-motion:reduce){.hdr,.hdr *{transition:none!important}}
/* The home header sits over the hero, not above it. */
.group-home .hdr{position:fixed}