/* Follow-up from the band: original wordmark and a simpler navigation. */
@layer identity {
  .desktop-nav { margin-left: 0; gap: 25px; }
  .header-actions { gap: 22px; }
  .social-links { display: flex; align-items: center; gap: 13px; }
  .social-links > a, .social-links > span { display: flex; padding-block: 8px; }
  .social-links svg { width: 18px; height: 18px; }
  .social-links a:hover { color: var(--accent); }
  .social-pending { color: #69717b; }
  .hero-content { padding-top: 105px; }
  .hero h1.hero-wordmark { width: min(660px, 52vw); line-height: 1; }
  /* Crop only the empty margins in CSS; the supplied PNGs remain unchanged. */
  .wordmark-window {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 2620 / 1128;
    margin: 0;
    overflow: hidden;
    mix-blend-mode: screen;
  }
  .wordmark-window > img {
    position: absolute;
    width: 114.503817%;
    max-width: none;
    height: auto;
    left: -7.328244%;
    top: -82.978723%;
  }
  .brand-lockup { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 88px; height: 92px; }
  .symbol-window { position: relative; display: block; width: 74%; aspect-ratio: 824 / 560; overflow: hidden; }
  .symbol-window > img { position: absolute; width: 124.271845%; max-width: none; height: auto; left: -12.135922%; top: -41.428571%; filter: brightness(0) invert(1); }
  .photo-sticker > .brand-lockup { width: 100%; height: auto; }
  .hero-bottom-copy { margin-top: 36px; }
  .merch { border-bottom: 1px solid var(--line); }
  .coming-soon-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; align-items: center; }
  .coming-soon-row h2 { font-size: clamp(80px, 10vw, 144px); }
  .coming-soon-row h2 > span { color: var(--accent); }
  .upcoming-label { display: inline-block; color: var(--violet); font-size: 10px; letter-spacing: 2px; margin-bottom: 16px; }
  .coming-soon-copy > p { font-size: 15px; line-height: 1.8; }
  .coming-soon-copy > .text-link { margin-top: 24px; }
  .lore { border-block: 1px solid var(--line); background: #10121b; }
  .lore h2 > span { color: var(--violet); }
  .footer-socials { gap: 18px; }
  .band-copy > p { max-width: 520px; font-size: 14px; line-height: 1.8; }
  .band-copy > .band-lead { font-size: 21px; line-height: 1.4; }

  @media (max-width: 1100px) {
    .header { padding-inline: 30px; }
    .desktop-nav { gap: 17px; }
    .header-actions { gap: 18px; }
    .social-links { gap: 10px; }
    .header-contact { padding-inline: 12px; gap: 12px; }
  }
  @media (min-width: 761px) and (max-width: 960px) {
    .header-contact { display: none; }
  }
  @media (max-width: 760px) {
    .header { padding-inline: 20px; }
    .brand-lockup { width: 76px; height: 80px; }
    .header-actions { gap: 20px; }
    .header-socials { gap: 12px; }
    .social-links svg { width: 17px; height: 17px; }
    .mobile-nav { max-height: calc(100svh - 92px); overflow-y: auto; background: var(--ink); }
    .mobile-nav > a { padding-block: 10px; font-size: 29px; }
    .hero-content { padding-top: 310px; }
    .hero h1.hero-wordmark { width: 100%; max-width: 460px; }
    .hero-bottom-copy { margin-top: 28px; }
    .coming-soon-row { grid-template-columns: 1fr; gap: 28px; }
    .coming-soon-row h2 { font-size: 88px; }
    .coming-soon-copy > p { font-size: 13px; }
    .upcoming-label { margin-bottom: 10px; font-size: 9px; }
    .footer-socials { gap: 18px; }
  }
  @media (max-width: 380px) {
    .header { padding-inline: 16px; }
    .brand-lockup { width: 64px; }
    .header-actions { gap: 14px; }
    .header-socials { gap: 9px; }
    .social-links svg { width: 16px; height: 16px; }
    .hero-content { padding-top: 300px; }
  }
}