/* SR.N4 hovercraft masthead.
 * Source photograph: "SRN4 Hovercraft The Princess Margaret", Wikimedia Commons.
 * The original hovercraft.band upload is left untouched; the treatment below
 * is applied in-browser. See the site footer for source/licence attribution.
 */

.hc-header__bar {
  position: relative;
  isolation: isolate;
  min-height: clamp(10.5rem, 22vw, 16.5rem);
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  padding-bottom: clamp(3.25rem, 5vw, 4rem);
  overflow: hidden;
  border: .16rem solid var(--hc-ink);
  border-bottom-width: .28rem;
  background: var(--hc-night);
  color: var(--hc-paper);
}

.hc-header__bar::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: 0;
  right: 0;
  bottom: 0;
  width: 64%;
  background-image: url("https://hovercraft.band/uploads/2026/9bca743b00.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(.82) contrast(1.04) brightness(.92);
}

.hc-header__bar::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  /* Match the approved mock-up: a true dark wordmark field feathering into the photograph. */
  background:
    linear-gradient(90deg,
      rgba(17,16,14,.98) 0%,
      rgba(17,16,14,.96) 35%,
      rgba(17,16,14,.82) 44%,
      rgba(17,16,14,.42) 53%,
      rgba(17,16,14,.10) 63%,
      rgba(17,16,14,0) 72%),
    linear-gradient(0deg, rgba(17,16,14,.18) 0%, transparent 48%);
  pointer-events: none;
}

.hc-wordmark,
.hc-wordmark:hover,
.hc-wordmark:focus-visible {
  position: relative;
  z-index: 1;
  color: var(--hc-paper);
  text-shadow: .045em .045em 0 rgba(17,16,14,.72);
}

.hc-header__signal {
  position: absolute;
  z-index: 1;
  left: clamp(1.25rem, 3vw, 2.25rem);
  bottom: clamp(.9rem, 2vw, 1.5rem);
  color: var(--hc-paper);
  text-align: left;
  text-shadow: 0 1px 3px var(--hc-ink);
}

.hc-nav {
  margin-top: 0;
}

@media (max-width: 50rem) {
  .hc-header__bar {
    min-height: 10rem;
    padding: 1rem 1rem 2.8rem;
  }

  .hc-header__bar::before {
    width: 68%;
    background-position: 58% center;
  }

  .hc-header__bar::after {
    background: linear-gradient(90deg,
      rgba(17,16,14,.98) 0%,
      rgba(17,16,14,.92) 40%,
      rgba(17,16,14,.58) 55%,
      rgba(17,16,14,.12) 74%,
      rgba(17,16,14,0) 86%);
  }

  .hc-header__signal {
    display: block;
    left: 1rem;
    bottom: .8rem;
  }
}

@media (max-width: 32rem) {
  .hc-header__bar {
    min-height: 9rem;
    padding-bottom: 2.6rem;
  }

  .hc-header__bar::before {
    width: 72%;
    background-position: 60% center;
  }

  .hc-header__bar::after {
    background: linear-gradient(90deg,
      rgba(17,16,14,.98) 0%,
      rgba(17,16,14,.90) 43%,
      rgba(17,16,14,.48) 62%,
      rgba(17,16,14,.08) 82%,
      rgba(17,16,14,0) 100%);
  }
}