:host { display: block; }
rewind-shop-nav { display: block; }

.rewind-masthead {
  border-bottom: 3px solid #35223b;
  background:
    linear-gradient(90deg, #64ded0, #36576b 24%, #362139 56%, #aa5278 88%, #ff9a9e) bottom / 100% 2px no-repeat,
    repeating-linear-gradient(0deg, #05091440 0 1px, transparent 1px 4px),
    linear-gradient(105deg, #17313a, #121623 43%, #2b1a31);
  color: #f8e5eb;
  box-shadow: 0 3px 0 #10121d;
}

.rewind-nav {
  box-sizing: border-box;
  width: min(100% - 1.5rem, 68rem);
  min-height: 4.25rem;
  padding-block: .5rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .4rem .6rem;
  font: 700 .75rem/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.rewind-nav a {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: .6rem;
  color: inherit;
  text-decoration: none;
}

.rewind-nav a:focus-visible { outline: 2px solid #84f5e5; outline-offset: 3px; }

.rewind-cassette {
  position: relative;
  flex: none;
  width: 2.4rem;
  height: 1.6rem;
  background: #8aefdc;
  clip-path: polygon(0 3px, 3px 3px, 3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px));
  box-shadow: inset 0 -4px #389b9f;
}

.rewind-cassette::before {
  content: "";
  position: absolute;
  inset: 5px 5px 8px;
  background: radial-gradient(circle at 5px 50%, #1c515f 0 1px, #ffcc98 1.5px 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 5px) 50%, #1c515f 0 1px, #ffcc98 1.5px 3px, transparent 3.5px),
    #172637;
}

.rewind-cassette::after {
  content: "";
  position: absolute;
  inset: auto 10px 3px;
  height: 3px;
  background: #172637;
}

.rewind-wordmark {
  color: #adffeb;
  font-size: clamp(.97rem, 2.3vw, 1.35rem);
  letter-spacing: .045em;
  line-height: 1;
  text-shadow: 2px 2px #284953, 0 0 12px #83efdb66;
}

.rewind-wordmark span {
  color: #ffd2de;
  text-shadow: 2px 2px #66354e, 0 0 12px #ff93b566;
}

.rewind-station {
  padding-inline: .75rem;
  border-inline: 1px solid #664660;
  color: #d9b5cc;
  font-size: .68rem;
  white-space: nowrap;
}

.rewind-station b { color: #ff99b0; }

.rewind-nav .rewind-directory {
  padding: .35rem .65rem;
  border: 1px solid #c97790;
  background: linear-gradient(150deg, #4b273c, #281b2d);
  box-shadow: 3px 3px #16101e, inset 0 -2px #60364b;
  color: #ffe2d0;
  font-size: .7rem;
  letter-spacing: .04em;
}

.rewind-directory span { color: #ffac91; transition: transform 150ms steps(3); }
.rewind-brand:hover .rewind-wordmark { color: #e1fff6; }
.rewind-directory:is(:hover, :focus-visible) { background: #66354e; }
.rewind-directory:is(:hover, :focus-visible) span { transform: translateX(-3px); }

@media (max-width: 40rem) {
  .rewind-station { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rewind-directory span { transition: none; }
  .rewind-directory:is(:hover, :focus-visible) span { transform: none; }
}