/* Shared Santa on State header controls.
   The approved artwork stays intact; these settings own only its layers and navigation feedback. */
:root {
  --header-accent-height: 2px;
  --header-accent-width: 80%;
  --header-accent-highlight: #f1d57c;
  --header-accent-gold: #c58a2d;
  --header-accent-amber: #a96d1d;
}

/* Align the title source with its visible layer while retaining the approved three-pixel vertical placement.
   This removes the duplicated ribbon-shadow seam caused by the old background source offset. */
@media (min-width: 701px) {
  .header-wordmark-shift { background-position: 0 calc(-.244140625vw); }
}

/* The existing large hit areas remain. Their feedback is limited to one centered, light gold accent. */
.art-header nav .art-link {
  background: transparent;
  box-shadow: none;
}
.art-header nav .art-link::after {
  position: absolute;
  left: calc((100% - var(--header-accent-width)) / 2);
  bottom: 30%;
  width: var(--header-accent-width);
  height: var(--header-accent-height);
  content: '';
  opacity: 0;
  transform: scaleX(.88);
  transform-origin: center;
  background: linear-gradient(to bottom, var(--header-accent-highlight) 0 28%, var(--header-accent-gold) 36% 70%, var(--header-accent-amber) 100%);
  box-shadow: 0 1px 1px #70430f24;
  transition: opacity .16s ease, transform .16s ease, filter .16s ease;
}
.art-header nav .art-link:hover,
.art-header nav .art-link:focus-visible,
.art-header nav .art-link[aria-current] {
  background: transparent;
  box-shadow: none;
}
.art-header nav .art-link:hover::after,
.art-header nav .art-link:focus-visible::after,
.art-header nav .art-link[aria-current]::after {
  opacity: 1;
  transform: scaleX(1);
}
.art-header nav .art-link:hover::after,
.art-header nav .art-link:focus-visible::after { filter: brightness(1.08); }
.art-header nav .art-link.is-pressed::after { animation: header-accent-pulse .24s ease-out both; }
.art-header nav .art-link:focus-visible { outline: 0; }

@keyframes header-accent-pulse {
  50% { filter: brightness(1.28); transform: scaleX(1.08); }
  100% { filter: brightness(1); transform: scaleX(1); }
}

@media (max-width: 700px) {
  .art-header nav .art-link { text-decoration: none; }
  .art-header nav .art-link::after { bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .art-header nav .art-link::after { transition: none; }
  .art-header nav .art-link.is-pressed::after { animation: none; }
}

/* The Santa on State wordmark remains a generous home-link target without
   painting a hover box or shadow over the approved header artwork. */
.art-header .art-home:hover {
  background: transparent;
  box-shadow: none;
}

/* The original header art contains desktop navigation words. On phones the
   real navigation reflows below the art, so cover only those legacy words. */
@media (max-width:700px) {
  .art-header-frame::after {
    position:absolute;
    z-index:3;
    top:15.5vw;
    right:0;
    width:46.5%;
    height:7.5vw;
    content:'';
    background:#f8f1e1;
    pointer-events:none;
  }
}

/* Available to keyboard users first, without changing the standard visual layout. */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 10px 14px;
  transform: translateY(-160%);
  border: 2px solid #f1d57c;
  border-radius: 4px;
  background: #1c4433;
  color: #fffaf1;
  font: 600 16px/1.2 'Work Sans', sans-serif;
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); outline: 3px solid #fffaf1; outline-offset: 2px; }