//-----------------------------------------------------------------------------
// Site Banner

[role="banner"] {
  @include leading-border(3px,.5);
  border-color: $susy-highlight;
  text-align: center;
  
  h1 {
    @include adjust-font-size-to($xxlargepx);
    @include at-breakpoint($break) { 
      @include adjust-font-size-to($xxxlargepx); 
    }

    span { display: none; }

    a {
      &:before { content: "\2039"; }
      &:after { content: "\203A"; }
      &:before, &:after {
        font-size: .875em;
        position: relative;
        top: -.16em; 
        letter-spacing: -.025em;
      }
      #{$focus} { 
        b, span { letter-spacing: 0; }
        span { opacity: 1; }
        color: $susy-highlight;
      }
    }

    @include at-breakpoint($break) {
      .fontface & {
        b, span {
          @include transition(all 300ms);
          display: inline-block;
          text-transform: uppercase;
          letter-spacing: -.44em;
        }
        span { opacity: 0; }
      }
    }
  }

  h2 {
    @include adjust-font-size-to($medpx);
    @include leader(-1,$medpx);
    @include trailer(.5,$medpx);
    display: block;
    position: relative;
    z-index: 2;
    
    @include at-breakpoint($break) { 
      @include adjust-font-size-to($largepx); 
      @include leader(-1,$largepx);
      @include trailer(1,$largepx);
    }
  }

}