.masthead {
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
}

.masthead-identity,
.masthead-info {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.75vw, 25px);
}

.masthead-info { justify-self: end; }
.masthead-info .site-pageviews { flex: none; width: auto; white-space: nowrap; }

.portfolio-credit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  color: #ff873d;
  font-family: Inter, "Avenir Next", system-ui, sans-serif;
  line-height: 1.15;
  white-space: nowrap;
}

.portfolio-credit > img {
  width: 25px;
  height: 25px;
  border: 1px solid #ff873d4d;
  border-radius: 7px;
}

.portfolio-credit small {
  display: block;
  margin-bottom: 2px;
  color: #d2ab90;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.portfolio-credit strong { font-size: 11px; font-weight: 700; }
.portfolio-credit:hover { color: #ffad79; }
.portfolio-credit:focus-visible { outline-color: #ff873d; }

.credit-orbit { display: none; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .credit-orbit {
    position: fixed;
    inset: 0 auto auto 0;
    z-index: 1;
    display: block;
    width: 0;
    height: 0;
    translate: var(--cursor-x) var(--cursor-y);
    pointer-events: none;
  }

  .credit-orbit > span {
    position: absolute;
    inset: -.5em auto auto -.3em;
    color: #ff9a56;
    font: 700 var(--bit-size) / 1 var(--mono);
    text-shadow: 0 0 5px #ff873d, 0 1px 2px #1b0b05;
    animation: credit-bit-orbit var(--speed) linear infinite;
  }
}

@keyframes credit-bit-orbit {
  from { transform: rotate(var(--angle)) translateX(var(--radius)) rotate(calc(-1 * var(--angle))); opacity: .52; }
  35% { opacity: 1; }
  76% { opacity: .38; }
  to { transform: rotate(calc(var(--angle) + 1turn)) translateX(var(--radius)) rotate(calc(-1turn - var(--angle))); opacity: .52; }
}

@media (max-width: 720px) {
  .masthead { grid-template-columns: minmax(0, 1fr) auto; }
  .masthead .station-id { display: none; }
}

@media (max-width: 520px) {
  .masthead { gap: 7px; }
  .masthead .station { gap: 5px; font-size: 10px; }
  .masthead .station img { width: 21px; height: 21px; }
  .masthead-info { gap: 7px; }
  .masthead-info .on-air > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .masthead-info .on-air i { margin: 0; vertical-align: middle; }
  .masthead-info .site-pageviews { display: grid; grid-template-columns: auto auto; gap: 1px 4px; justify-items: start; }
  .masthead-info .site-pageviews > svg { grid-row: span 2; width: 11px; height: 11px; }
  .masthead-info .site-pageviews > strong { padding: 0; border: 0; line-height: 1; }
  .portfolio-credit > img { width: 21px; height: 21px; border-radius: 6px; }
  .portfolio-credit strong { font-size: 10px; }
}

@media (max-width: 315px) {
  .masthead-info .on-air { display: none; }
  .masthead .station { letter-spacing: .06em; }
}