/* DRUMOJO public site: surgical small-screen geometry repair for the original
   manga/editorial design. The original palette, hierarchy, panels, typography,
   public copy, navigation model, and imagery are preserved. */
@media (max-width: 440px) {
  body.experience .main-header .header-inner {
    gap: 7px;
  }
  body.experience .main-header .brand {
    min-width: 0;
    gap: 5px;
  }
  body.experience .main-header .drumojo-original-mark {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
  }
  body.experience .main-header .brand-type {
    font-size: clamp(1.48rem, 6.4vw, 1.9rem);
  }
  body.experience .main-header .brand-type small {
    font-size: .34rem;
    letter-spacing: .04em;
  }
  body.experience .main-header .header-actions {
    gap: 6px;
    margin-left: auto;
  }
  body.experience .main-header .header-join {
    padding: 10px 6px;
    font-size: .63rem;
    letter-spacing: -.015em;
  }
  body.experience .main-header .menu-toggle {
    flex: 0 0 39px;
    width: 39px;
    height: 39px;
  }
}
@media (max-width: 350px) {
  body.experience .main-header .brand-type small {
    display: none;
  }
  body.experience .main-header .brand-type {
    font-size: 1.45rem;
  }
  body.experience .main-header .header-join {
    font-size: .57rem;
    padding: 9px 4px;
  }
}

/* Narrow-screen publishing directory: preserve the original manga masthead while
   allowing translated navigation labels to wrap inside the viewport. */
@media (max-width: 370px) {
  .dm-public-info-directory {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.55rem;
    max-width: 100%;
    min-width: 0;
  }
  .dm-public-info-directory a {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .dm-rig-panel,
  .dm-rig-panel > *,
  .join-panel,
  .join-panel > * {
    min-width: 0;
    max-width: 100%;
  }
  .join-panel { grid-template-columns: minmax(0, 1fr); }
}