/* Shared black YAME masthead refresh for every page. */
.site-header .masthead {
  --masthead-label-right-inset: 0.65rem;
  min-height: 4.5rem;
  padding-block: 0.63rem;
  color: #D9AB2A;
  background: #050505;
  border-bottom: 0;
}
.site-header .masthead__page-context { color: #D9AB2A; }
.site-header .masthead .brand-logo { width: clamp(6.3rem, 9.9vw, 8.55rem); }
.site-header .masthead .language-button { background:#050505; border-color:#F6EDDC; }
.site-header .masthead .language-button button { color:#F6EDDC; }
.site-header .masthead .language-button button + button { border-left-color:#F6EDDC; }
.site-header .masthead .language-button button:hover,
.site-header .masthead .language-button button[aria-pressed="true"] { color:#050505; background:#F6EDDC; }
.site-header .masthead .search-trigger { color:#F6EDDC; }
.site-header .masthead .menu-button span { background:#F6EDDC; }
.site-header .masthead .brand-link:focus-visible,
.site-header .masthead .language-button button:focus-visible { outline-color:#F6EDDC; }
@media (max-width: 480px) {
  .site-header .masthead { min-height:0; padding-block:.665rem; }
  .site-header .masthead .brand-logo { width:clamp(4.56rem,23.75vw,5.7rem); }
}


/* Footer: align the logo and Korean tagline, with a tighter top inset. */
.site-footer {
  padding-top: clamp(1.725rem, 3.75vw, 3rem);
}
.site-footer .footer-brand-row {
  align-items: center;
}
.site-footer .brand-link--footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  transform: none;
}
.site-footer .brand-link--footer .brand-logo {
  display: block;
  height: auto;
}
.site-footer .footer-motto {
  line-height: 1.35;
}

/* Footer promise follows the divider and matches the copyright type size. */
.site-footer .footer-brand-promise {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  opacity: 0.65;
}

/* Center the shared masthead controls vertically without changing header height. */
.site-header .masthead__right {
  align-self: center;
}

/* On mobile, keep the fixed MUSIC tab consistent with the other black tabs. */
@media (max-width: 48rem) {
  .site-header .category-bar a.category-bar__music,
  .site-header .category-bar a.category-bar__music:hover,
  .site-header .category-bar a.category-bar__music:focus-visible,
  .site-header .category-bar a.category-bar__music:active,
  .site-header .category-bar a.category-bar__music[aria-current="page"] {
    color: #F6EDDC;
    background: #050505;
  }

  .site-header .category-bar a.category-bar__music::after {
    background: #F6EDDC;
  }

  .site-header .category-bar a.category-bar__music:focus-visible {
    outline: 2px solid #F6EDDC;
    outline-offset: -3px;
  }
}

/* Shared open-menu treatment across desktop and mobile pages. */
.site-header .menu-panel {
  background: #050505;
  border-bottom-color: #050505;
}

.site-header .menu-panel a:not(.menu-panel__music) {
  color: #F6EDDC;
  font-family: "Archivo", sans-serif !important;
  font-weight: 800 !important;
}

.site-header .menu-panel a.menu-panel__music,
.site-header .menu-panel a.menu-panel__music:hover,
.site-header .menu-panel a.menu-panel__music:focus-visible,
.site-header .menu-panel a.menu-panel__music:active,
.site-header .menu-panel a.menu-panel__music[aria-current="page"] {
  color: #050505;
  background: #D9AB2A;
  border-top-color: #050505;
}

.site-header .menu-panel a.menu-panel__music:focus-visible {
  outline-color: #050505;
}

/* Keep the hamburger list rhythm even and prevent the mascot art from
   determining the Editor's Pick row position. */
.site-header .menu-panel a.menu-panel__contact {
  margin-top: 0;
  padding-top: 0.275rem;
  border-top: 0;
}

.site-header .menu-panel__motion {
  position: relative;
  height: 0;
  min-height: 0;
  align-self: end;
  margin-bottom: 0;
  overflow: visible;
}

.site-header .menu-panel__gif {
  position: absolute;
  right: 0;
  bottom: 0;
}


/* Keep the mascot position consistent on mobile across every page. */
@media (max-width: 759px) {
  .site-header .menu-panel__gif {
    width: clamp(280px, 84vw, 360px);
    transform: translate(30%, 15%);
  }
}

/* Match the tested mobile menu rhythm and layout on desktop as well. */
@media (min-width: 760px) {
  .site-header .menu-panel {
    row-gap: 0.3rem;
  }

  .site-header .menu-panel__links {
    gap: 0.125rem;
  }

  .site-header .menu-panel a:not(.menu-panel__music) {
    color: #F6EDDC;
    font-family: "Archivo", sans-serif !important;
    font-size: 1.65rem;
    font-weight: 800 !important;
  }

  .site-header .menu-panel a.menu-panel__contact {
    margin-top: 0;
    padding-top: 0.275rem;
    border-top: 0;
  }

  .site-header .menu-panel a.menu-panel__music {
    color: #050505;
    background: #D9AB2A;
    font-family: "Archivo", sans-serif !important;
    font-size: 1.65rem;
    font-weight: 800 !important;
    margin-bottom: -0.6rem;
    transform: translateY(-20%);
  }

  .site-header .menu-panel__gif {
    width: 360px;
    right: 0;
    bottom: 0;
    transform: translate(30%, 15%);
  }
}

/* Highlight menu categories with the Editor's Pick gold on hover, focus,
   press, and for the current page. */
.site-header .menu-panel__links > a {
  transition: color 180ms ease;
}

.site-header .menu-panel__links > a:hover,
.site-header .menu-panel__links > a:focus-visible,
.site-header .menu-panel__links > a:active,
.site-header .menu-panel__links > a[aria-current="page"] {
  color: #D9AB2A;
}