@layer components {
  .header-top__inner {
    justify-content: space-between;
    gap: var(--space-5);
  }

  .brand {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .tagline {
    font-size: var(--text-sm);
    font-weight: 800;
  }

  /* Logo: outline layer (the text itself) + glossy fill layer (::after) */
  .logo {
    position: relative;
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--logo-size);
    line-height: 1.1;
    white-space: nowrap;
    text-decoration: none;
    color: var(--logo-outline);
    -webkit-text-stroke: var(--logo-outline-w) var(--logo-outline);
    filter: drop-shadow(var(--space-1) var(--space-1) 0 var(--logo-outline));
    transition: transform var(--speed-fast) ease-out;
  }

  .logo::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    -webkit-text-stroke: 0;
    color: transparent;
    background: linear-gradient(
      to bottom,
      var(--logo-fill-top) 0 50%,
      var(--logo-fill-bottom) 50% 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
  }

  .logo:hover {
    transform: rotate(-2deg) scale(1.03);
  }

  .logo__sparkle {
    --sticker-color: var(--sparkle-color);
    position: absolute;
    top: -0.35em;
    right: -0.75em;
    -webkit-text-stroke: 0;
    animation: twinkle var(--twinkle-duration) ease-in-out infinite;
  }

  @keyframes twinkle {
    0%,
    100% {
      transform: scale(0.6) rotate(0deg);
      opacity: 0.5;
    }
    50% {
      transform: scale(1) rotate(25deg);
      opacity: 1;
    }
  }

  /* Right side: header 1 links, date, mood */
  .header-top__meta {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-2);
  }

  .lcd {
    padding-inline: var(--space-2);
    font-family: var(--font-pixel);
    font-size: var(--text-lg);
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--lcd-ink);
    background: var(--lcd-bg);
    border: var(--border-w) solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 var(--space-1) var(--color-shade);
  }

  .mood__label {
    font-weight: 900;
  }

  /* News ticker */
  .ticker {
    flex: 1;
    min-width: 0;
    max-width: var(--ticker-max-w);
    overflow: hidden;
    padding-block: var(--space-1);
    font-family: var(--font-pixel);
    font-size: var(--text-lg);
    line-height: 1.2;
    background: var(--ticker-bg);
    border-radius: var(--radius-pill);
  }

  .ticker__track {
    display: flex;
    width: max-content;
    animation: ticker var(--ticker-duration) linear infinite;
  }

  .ticker:hover .ticker__track,
  .ticker:focus-visible .ticker__track {
    animation-play-state: paused;
  }

  .ticker__item {
    padding-inline: var(--space-4) var(--space-6);
    white-space: nowrap;
  }

  @keyframes ticker {
    to {
      transform: translateX(-50%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .logo__sparkle,
    .ticker__track {
      animation-name: none;
    }

    .ticker__track {
      width: 100%;
    }

    .ticker__item {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .ticker__item[aria-hidden="true"] {
      display: none;
    }
  }
}
@layer components {
  /* Header 1 wears the floral print */
  .header-top {
    background-image: var(--floral-pattern);
    background-size: var(--floral-pattern-size);
  }
}
@layer components {
  /* Header 2 tabs: plain links, no underline */
  .nav-tab,
  .nav-tab:visited {
    color: var(--color-header-nav-ink);
    text-decoration: none;
  }
}